vue中監(jiān)聽路由參數(shù)的變化及方法
更新時間：2019年12月06日 13:32:00 作者：Jade_g
這篇文章主要介紹了vue中監(jiān)聽路由參數(shù)的變化,給大家介紹了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ù)刷新，需手動刷新瀏覽器，這樣做就不是我們的預(yù)期效果。
舉例：當前路由為 /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ù)的變化及方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！
相關(guān)文章
vue 實現(xiàn)tab切換保持數(shù)據(jù)狀態(tài)
這篇文章主要介紹了vue 實現(xiàn)tab切換保持數(shù)據(jù)狀態(tài)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要為大家詳細介紹了五種Vue實現(xiàn)加減乘除運算的方法,文中的示例代碼簡潔易懂,對我們深入了解vue有一定的幫助,需要的可以了解下2023-08-08
Slots Emit和Props穿透組件封裝實現(xiàn)摸魚加鐘
這篇文章主要為大家介紹了Slots Emit和Props穿透組件封裝實現(xiàn)示例詳解，為摸魚加個鐘，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
這篇文章給大家主要介紹了Vue.js中數(shù)組變動的檢測，文中給出了詳細的示例代碼和過程介紹，相信會對大家的理解和學習很有幫助，有需要的朋友們下面來一起看看吧。2016-10-10
日歷在很多地方都可以使用的到，這篇文章主要介紹了如何利用vue3實現(xiàn)簡單的日歷控件，文中通過示例代碼講解詳細，需要的朋友們下面隨著小編來一起學習學習吧2023-04-04
vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,適合用于構(gòu)建單頁面應(yīng)用,這篇文章主要給大家介紹了關(guān)于如何在Vue 3中擴展Vue Router鏈接的相關(guān)資料,需要的朋友可以參考下2021-06-06
今天小編就為大家分享 一篇VUE渲染后端返回含有script標簽的html字符串示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
這篇文章主要介紹了記一次用vue做的活動頁的方法步驟，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
在實際開發(fā)項目過程中有時候需要上傳比較大的文件，然后呢，上傳的時候相對來說就會慢一些，so，后臺可能會要求前端進行文件切片上傳。本文介紹了Vue實現(xiàn)文件切片上傳的示例代碼，需要的可以參考一下2022-10-10
這篇文章主要記錄了親自動手實現(xiàn)vue日歷控件的詳細過程，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-06-06