這篇文章主要介紹vue.js監(jiān)聽路由變化的方法，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供圖木舒克網(wǎng)站建設(shè)、圖木舒克做網(wǎng)站、圖木舒克網(wǎng)站設(shè)計、圖木舒克網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計與制作、圖木舒克企業(yè)網(wǎng)站模板建站服務(wù)，十余年圖木舒克做網(wǎng)站經(jīng)驗，不只是建網(wǎng)站，更提供有價值的思路和整體網(wǎng)絡(luò)服務(wù)。

vue.js監(jiān)聽路由變化的方法：1、通過watch實現(xiàn)，代碼為【watch:{$route(to,from){console.log(to.path);}】；2、key是用來阻止“復(fù)用”的，代碼為【

vue.js監(jiān)聽路由變化的方法：

方法一：通過 watch

// 監(jiān)聽,當(dāng)路由發(fā)生變化的時候執(zhí)行
watch:{
  $route(to,from){
    console.log(to.path);
  }
},

或

// 監(jiān)聽,當(dāng)路由發(fā)生變化的時候執(zhí)行
watch: {
  $route: {
    handler: function(val, oldVal){
      console.log(val);
    },
    // 深度觀察監(jiān)聽
    deep: true
  }
},

或

// 監(jiān)聽,當(dāng)路由發(fā)生變化的時候執(zhí)行
watch: {
  '$route':'getPath'
},
methods: {
  getPath(){
    console.log(this.$route.path);
  }
}

方法二：key是用來阻止“復(fù)用”的

Vue 為你提供了一種方式來聲明“這兩個元素是完全獨立的——不要復(fù)用它們”。只需添加一個具有唯一值的 key 屬性即可(Vue文檔原話)

 
computed: {
  key() {
    return this.$route.name !== undefined? this.$route.name +new Date(): this.$route +new Date()
  }
}

使用computed屬性和Date()可以保證每一次的key都是不同的，這樣就可以如愿刷新數(shù)據(jù)了。

方法三：通過 vue-router 的鉤子函數(shù) beforeRouteEnter beforeRouteUpdate beforeRouteLeave

以上是“vue.js監(jiān)聽路由變化的方法”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！