vue中watch監聽路由傳來的參數變化問題

目錄 vue中watch監聽路由傳來的參數變化 vue-router如何響應路由參數的變化（watch監聽|導航守衛） 方法一watch監聽 方法二：導航守衛 vue中watch監聽路由傳來的參數變化 一個組件內寫了個編

目錄

• vue中watch監聽路由傳來的參數變化
• vue-router如何響應路由參數的變化（watch監聽|導航守衛）
• 方法一watch監聽
• 方法二：導航守衛

vue中watch監聽路由傳來的參數變化

一個組件內寫了個編程路由，通過交互觸發

 this.$router.push({
          name: "Result",
          query: {
            // 發送搜索詞給result
            title: this.inputVal,
          },

在接收參數的路由組件中watch內

 watch: {
    // 監視搜索詞變化
    "$route.query.title": {
      immediate: true,
      handler() {
        this.search();
      },
    },
  },

這樣直接監視傳來的參數有效

如果用data接收參數，在監視就沒效在data內

 data() {
    return {
      searchVal:this.$route.query.title,
      }
   }
 watch: {
    // 監視搜索詞變化
    searchVal: {
      immediate: true,
      deep: true,
      handler() {
        console.log("a");
        this.search();
      },
    },
  },

深度監視也無效

vue-router如何響應路由參數的變化（watch監聽|導航守衛）

什么是路由參數的變化

當使用路由參數時，例如從?/user/foo?導航到?/user/bar，原來的組件實例會被復用。因為兩個路由都渲染同個組件，比起銷毀再創建，復用則顯得更加高效。不過，這也意味著組件的生命周期鉤子不會再被調用。

監測路由參數變化的方法（watch監聽|導航守衛）

方法一watch監聽

watch: { // watch的第一種寫法
$route (to, from) {
console.log(to)
console.log(from)
}
},
watch: { // watch的第二種寫法
$route: {
handler (to, from){
console.log(to)
console.log(from)
},
// 深度觀察監聽
deep: true
}
},
watch: { // watch的第三種寫法
'$route':'getPath'
},
methods: {
getPath(to, from){
console.log(this.$route.path);
}
},
----------------------------------------------------------------
舉例：
watch: {
// 方法1 //監聽路由是否變化
'$route' (to, from) {
if(to.query.id !== from.query.id){
this.id = to.query.id;
this.init();//重新加載數據
}
}
}
//方法 2 設置路徑變化時的處理函數
watch: {
'$route': {
handler: 'init',
immediate: true
}
為了實現這樣的效果可以給router-view添加一個不同的key，這樣即使是公用組件，只要url變化了，就一定會重新創建這個組件。
<router-view :key="$route.fullpath"></router-view>

方法二：導航守衛

beforeRouteEnter (to, from, next) {
console.log('beforeRouteEnter被調用：在渲染該組件的對應路由被 confirm 前調用')
// 在渲染該組件的對應路由被 confirm 前調用
// 不！能！獲取組件實例 `this` 因為當守衛執行前，組件實例還沒被創建
// 可以通過傳一個回調給 next來訪問組件實例。在導航被確認的時候執行回調，并且把組件實例作為回調方法的參數。
next(vm => {
// 通過 `vm` 訪問組件實例
console.log(vm)
})
},
// beforeRouteEnter 是支持給 next 傳遞回調的唯一守衛。
// 對于 beforeRouteUpdate 和 beforeRouteLeave 來說，this 已經可用了，所以不支持傳遞回調，因為沒有必要了。
beforeRouteUpdate (to, from, next) {
// 在當前路由改變，但是該組件被復用時調用
// 舉例來說，對于一個帶有動態參數的路徑 /foo/:id，在 /foo/1 和 /foo/2 之間跳轉的時候，
// 由于會渲染同樣的 Foo 組件，因此組件實例會被復用。而這個鉤子就會在這個情況下被調用。
// 可以訪問組件實例 `this`
console.log('beforeRouteUpdate被調用：在當前路由改變，但是該組件被復用時調用')
next()
},
beforeRouteLeave (to, from, next) {
// 導航離開該組件的對應路由時調用
// 可以訪問組件實例 `this`
const answer = window.confirm('是否確認離開當前頁面')
if (answer) {
console.log('beforeRouteLeave被調用：導航離開該組件的對應路由時調用')
next()
} else {
next(false)
}
},

到此這篇關于vue中watch監聽路由傳來的參數變化的文章就介紹到這了,更多相關vue watch監聽路由內容請搜索技圈網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持技圈網！

【本文轉自：日本cn2服務器 http://www.558idc.com/jap.html提供，感恩】