目錄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ù)變化

一個組件內(nèi)寫了個編程路由，通過交互觸發(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ù)時，例如從 /user/foo 導(dǎo)航到 /user/bar，原來的組件實例會被復(fù)用。因為兩個路由都渲染同個組件，比起銷毀再創(chuàng)建，復(fù)用則顯得更加高效。不過，這也意味著組件的生命周期鉤子不會再被調(diào)用。

監(jiān)測路由參數(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ù)watch: {'$route': {handler: 'init',immediate: true}為了實現(xiàn)這樣的效果可以給router-view添加一個不同的key，這樣即使是公用組件，只要url變化了，就一定會重新創(chuàng)建這個組件。<router-view :key='$route.fullpath'></router-view>方法二：導(dǎo)航守衛(wèi)beforeRouteEnter (to, from, next) {console.log('beforeRouteEnter被調(diào)用：在渲染該組件的對應(yīng)路由被 confirm 前調(diào)用')// 在渲染該組件的對應(yīng)路由被 confirm 前調(diào)用// 不！能！獲取組件實例 `this` 因為當(dāng)守衛(wèi)執(zhí)行前，組件實例還沒被創(chuàng)建// 可以通過傳一個回調(diào)給 next來訪問組件實例。在導(dǎo)航被確認(rèn)的時候執(zhí)行回調(diào)，并且把組件實例作為回調(diào)方法的參數(shù)。next(vm => {// 通過 `vm` 訪問組件實例console.log(vm)})},// beforeRouteEnter 是支持給 next 傳遞回調(diào)的唯一守衛(wèi)。// 對于 beforeRouteUpdate 和 beforeRouteLeave 來說，this 已經(jīng)可用了，所以不支持傳遞回調(diào)，因為沒有必要了。beforeRouteUpdate (to, from, next) {// 在當(dāng)前路由改變，但是該組件被復(fù)用時調(diào)用// 舉例來說，對于一個帶有動態(tài)參數(shù)的路徑 /foo/:id，在 /foo/1 和 /foo/2 之間跳轉(zhuǎn)的時候，// 由于會渲染同樣的 Foo 組件，因此組件實例會被復(fù)用。而這個鉤子就會在這個情況下被調(diào)用。// 可以訪問組件實例 `this`console.log('beforeRouteUpdate被調(diào)用：在當(dāng)前路由改變，但是該組件被復(fù)用時調(diào)用')next()},beforeRouteLeave (to, from, next) {// 導(dǎo)航離開該組件的對應(yīng)路由時調(diào)用// 可以訪問組件實例 `this`const answer = window.confirm('是否確認(rèn)離開當(dāng)前頁面')if (answer) {console.log('beforeRouteLeave被調(diào)用：導(dǎo)航離開該組件的對應(yīng)路由時調(diào)用')next()} else {next(false)}},

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