vue中監(jiān)聽路由參數(shù)的變化及方法
在vue項目中,假使我們在同一個路由下,只是改變路由后面的參數(shù)值,期望達到數(shù)據(jù)的更新。
mounted: () =>{ this.id = this.$route.query.id; this.getdetail() }
getDetail()方法中會用到this.id這個參數(shù),在同一頁面切換id的值,并不會觸發(fā)vue的聲明周期函數(shù)。
可以添加路由監(jiān)聽:
watch: { $route: { handler() { this.id = this.$route.query.id; this.getDetail(); //深度監(jiān)聽,同時也可監(jiān)聽到param參數(shù)變化 }, deep: true, } }
ps:下面看下vue中監(jiān)聽路由參數(shù)變化的方法
在vue項目中,假使我們在同一個路由下,只是改變路由后面的參數(shù)值,如果不監(jiān)聽路由參數(shù)值的變化,頁面無數(shù)據(jù)刷新,需手動刷新瀏覽器,這樣做就不是我們的預期效果。
舉例:當前路由為 /pjthome?pjtid=123456
mounted: function () { this.pjtid = this.$route.query.pjtid this.pjtdetail() },
在頁面pjtdetail()方法中,需要用到pjtid這個參數(shù),假如在同一頁面有相似項目切換,只是pjtid發(fā)生變化,在切換時,并未重新加載數(shù)據(jù),原因是跟vue的生命周期有關(guān),具體該解決這個問題,添加路由監(jiān)聽即可。
exp:
watch: { $route(){ this.pjtid = this.$route.query.pjtid }, pjtid() { this.pjtdetail() }, }
解決。
總結(jié)
以上所述是小編給大家介紹的vue中監(jiān)聽路由參數(shù)的變化及方法,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
如果你覺得本文對你有幫助,歡迎轉(zhuǎn)載,煩請注明出處,謝謝!
相關(guān)文章
使用 Vue-TCB 快速在 Vue 應用中接入云開發(fā)的方法
這篇文章主要介紹了如何使用 Vue-TCB 快速在 Vue 應用中接入云開發(fā),本文給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下2020-02-02解決vue.js在編寫過程中出現(xiàn)空格不規(guī)范報錯的問題
下面小編就為大家?guī)硪黄鉀Qvue.js在編寫過程中出現(xiàn)空格不規(guī)范報錯的問題。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-09-09淺談vite和webpack的性能優(yōu)化和區(qū)別
本文主要介紹了淺談vite和webpack的區(qū)別,從性能優(yōu)化的幾個方便講解,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2023-05-05Vue 使用Props屬性實現(xiàn)父子組件的動態(tài)傳值詳解
今天小編就為大家分享一篇Vue 使用Props屬性實現(xiàn)父子組件的動態(tài)傳值詳解,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11vue之input輸入框防抖debounce函數(shù)的使用方式
這篇文章主要介紹了vue之input輸入框防抖debounce函數(shù)的使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11vue3項目typescript如何export引入(imported)的interface問題
這篇文章主要介紹了vue3項目typescript如何export引入(imported)的interface問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06