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