vue中watch監(jiān)聽路由傳來的參數(shù)變化問題

目錄 vue中watch監(jiān)聽路由傳來的參數(shù)變化 vue-router如何響應(yīng)路由參數(shù)的變化（watch監(jiān)聽|導(dǎo)航守衛(wèi)） 方法一watch監(jiān)聽 方法二：導(dǎo)航守衛(wèi) vue中watch監(jiān)聽路由傳來的參數(shù)變化 一個(gè)組件內(nèi)寫了個(gè)編

目錄

• vue中watch監(jiān)聽路由傳來的參數(shù)變化
• vue-router如何響應(yīng)路由參數(shù)的變化（watch監(jiān)聽|導(dǎo)航守衛(wèi)）
• 方法一watch監(jiān)聽
• 方法二：導(dǎo)航守衛(wèi)

vue中watch監(jiān)聽路由傳來的參數(shù)變化

一個(gè)組件內(nèi)寫了個(gè)編程路由，通過交互觸發(fā)

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

在接收參數(shù)的路由組件中watch內(nèi)

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

這樣直接監(jiān)視傳來的參數(shù)有效

如果用data接收參數(shù)，在監(jiān)視就沒效在data內(nèi)

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

深度監(jiān)視也無效

vue-router如何響應(yīng)路由參數(shù)的變化（watch監(jiān)聽|導(dǎo)航守衛(wèi)）

什么是路由參數(shù)的變化

當(dāng)使用路由參數(shù)時(shí)，例如從?/user/foo?導(dǎo)航到?/user/bar，原來的組件實(shí)例會(huì)被復(fù)用。因?yàn)閮蓚€(gè)路由都渲染同個(gè)組件，比起銷毀再創(chuàng)建，復(fù)用則顯得更加高效。不過，這也意味著組件的生命周期鉤子不會(huì)再被調(diào)用。

監(jiān)測(cè)路由參數(shù)變化的方法（watch監(jiān)聽|導(dǎo)航守衛(wèi)）

方法一watch監(jiān)聽

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

方法二：導(dǎo)航守衛(wèi)

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

到此這篇關(guān)于vue中watch監(jiān)聽路由傳來的參數(shù)變化的文章就介紹到這了,更多相關(guān)vue watch監(jiān)聽路由內(nèi)容請(qǐng)搜索技圈網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持技圈網(wǎng)！

【本文轉(zhuǎn)自：日本cn2服務(wù)器 http://www.558idc.com/jap.html提供，感恩】