在vue項目中，假使我們在同一個路由下，只是改變路由后面的參數值，期望達到數據的更新。

mounted: () =>{   this.id = this.$route.query.id;   this.getdetail()}

getDetail()方法中會用到this.id這個參數，在同一頁面切換id的值，并不會觸發vue的聲明周期函數。

可以添加路由監聽：

watch: {  $route: {     handler() {       this.id = this.$route.query.id;       this.getDetail();       //深度監聽，同時也可監聽到param參數變化    },    deep: true,  } }   

ps：下面看下vue中監聽路由參數變化的方法

在vue項目中，假使我們在同一個路由下，只是改變路由后面的參數值，如果不監聽路由參數值的變化，頁面無數據刷新，需手動刷新瀏覽器，這樣做就不是我們的預期效果。

舉例：當前路由為  /pjthome?pjtid=123456

mounted: function () {   this.pjtid = this.$route.query.pjtid   this.pjtdetail()},

在頁面pjtdetail(）方法中，需要用到pjtid這個參數，假如在同一頁面有相似項目切換，只是pjtid發生變化，在切換時，并未重新加載數據，原因是跟vue的生命周期有關，具體該解決這個問題，添加路由監聽即可。

exp:

watch: {   $route(){    this.pjtid = this.$route.query.pjtid   },   pjtid() {    this.pjtdetail()   },}

解決。

總結

以上所述是小編給大家介紹的vue中監聽路由參數的變化及方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網之家網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！