vue中監(jiān)聽(tīng)路由參數(shù)的變化及方法
在vue項(xiàng)目中，假使我們?cè)谕粋€(gè)路由下，只是改變路由后面的參數(shù)值，期望達(dá)到數(shù)據(jù)的更新。
mounted: () =>{
this.id = this.$route.query.id;
this.getdetail()
}
getDetail()方法中會(huì)用到this.id這個(gè)參數(shù)，在同一頁(yè)面切換id的值，并不會(huì)觸發(fā)vue的聲明周期函數(shù)。
可以添加路由監(jiān)聽(tīng)：
watch: {
$route: {
handler() {
this.id = this.$route.query.id;
this.getDetail();
//深度監(jiān)聽(tīng)，同時(shí)也可監(jiān)聽(tīng)到param參數(shù)變化
},
deep: true,
}
}
ps：下面看下vue中監(jiān)聽(tīng)路由參數(shù)變化的方法
在vue項(xiàng)目中，假使我們?cè)谕粋€(gè)路由下，只是改變路由后面的參數(shù)值，如果不監(jiān)聽(tīng)路由參數(shù)值的變化，頁(yè)面無(wú)數(shù)據(jù)刷新，需手動(dòng)刷新瀏覽器，這樣做就不是我們的預(yù)期效果。
舉例：當(dāng)前路由為 /pjthome?pjtid=123456
mounted: function () {
this.pjtid = this.$route.query.pjtid
this.pjtdetail()
},
在頁(yè)面pjtdetail(）方法中，需要用到pjtid這個(gè)參數(shù)，假如在同一頁(yè)面有相似項(xiàng)目切換，只是pjtid發(fā)生變化，在切換時(shí)，并未重新加載數(shù)據(jù)，原因是跟vue的生命周期有關(guān)，具體該解決這個(gè)問(wèn)題，添加路由監(jiān)聽(tīng)即可。
exp:
watch: {
$route(){
this.pjtid = this.$route.query.pjtid
},
pjtid() {
this.pjtdetail()
},
}
解決。
總結(jié)
以上所述是小編給大家介紹的vue中監(jiān)聽(tīng)路由參數(shù)的變化及方法，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！
相關(guān)文章
vue 實(shí)現(xiàn)tab切換保持?jǐn)?shù)據(jù)狀態(tài)
這篇文章主要介紹了vue 實(shí)現(xiàn)tab切換保持?jǐn)?shù)據(jù)狀態(tài)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
五種Vue實(shí)現(xiàn)加減乘除運(yùn)算的方法總結(jié)
這篇文章主要為大家詳細(xì)介紹了五種Vue實(shí)現(xiàn)加減乘除運(yùn)算的方法,文中的示例代碼簡(jiǎn)潔易懂,對(duì)我們深入了解vue有一定的幫助,需要的可以了解下2023-08-08
Slots Emit和Props穿透組件封裝實(shí)現(xiàn)摸魚(yú)加鐘
這篇文章主要為大家介紹了Slots Emit和Props穿透組件封裝實(shí)現(xiàn)示例詳解，為摸魚(yú)加個(gè)鐘，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
Vue.js中數(shù)組變動(dòng)的檢測(cè)詳解
這篇文章給大家主要介紹了Vue.js中數(shù)組變動(dòng)的檢測(cè)，文中給出了詳細(xì)的示例代碼和過(guò)程介紹，相信會(huì)對(duì)大家的理解和學(xué)習(xí)很有幫助，有需要的朋友們下面來(lái)一起看看吧。2016-10-10
日歷在很多地方都可以使用的到，這篇文章主要介紹了如何利用vue3實(shí)現(xiàn)簡(jiǎn)單的日歷控件，文中通過(guò)示例代碼講解詳細(xì)，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
如何在Vue 3中擴(kuò)展Vue Router鏈接詳解
vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,適合用于構(gòu)建單頁(yè)面應(yīng)用,這篇文章主要給大家介紹了關(guān)于如何在Vue 3中擴(kuò)展Vue Router鏈接的相關(guān)資料,需要的朋友可以參考下2021-06-06
VUE渲染后端返回含有script標(biāo)簽的html字符串示例
今天小編就為大家分享 一篇VUE渲染后端返回含有script標(biāo)簽的html字符串示例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10
這篇文章主要介紹了記一次用vue做的活動(dòng)頁(yè)的方法步驟，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
在實(shí)際開(kāi)發(fā)項(xiàng)目過(guò)程中有時(shí)候需要上傳比較大的文件，然后呢，上傳的時(shí)候相對(duì)來(lái)說(shuō)就會(huì)慢一些，so，后臺(tái)可能會(huì)要求前端進(jìn)行文件切片上傳。本文介紹了Vue實(shí)現(xiàn)文件切片上傳的示例代碼，需要的可以參考一下2022-10-10
親自動(dòng)手實(shí)現(xiàn)vue日歷控件
這篇文章主要記錄了親自動(dòng)手實(shí)現(xiàn)vue日歷控件的詳細(xì)過(guò)程，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-06-06