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

一個(gè)組件內(nèi)寫(xiě)了個(gè)編程路由，通過(guò)交互觸發(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)視傳來(lái)的參數(shù)有效

如果用data接收參數(shù)，在監(jiān)視就沒(méi)效在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)視也無(wú)效

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

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

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

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

方法一watch監(jiān)聽(tīng)watch: { // watch的第一種寫(xiě)法$route (to, from) {console.log(to)console.log(from)}},watch: { // watch的第二種寫(xiě)法$route: {handler (to, from){console.log(to)console.log(from)},// 深度觀察監(jiān)聽(tīng)deep: true}},watch: { // watch的第三種寫(xiě)法'$route':'getPath'},methods: {getPath(to, from){console.log(this.$route.path);}},----------------------------------------------------------------舉例：watch: {// 方法1 //監(jiān)聽(tīng)路由是否變化'$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í)例還沒(méi)被創(chuàng)建// 可以通過(guò)傳一個(gè)回調(diào)給 next來(lái)訪問(wèn)組件實(shí)例。在導(dǎo)航被確認(rèn)的時(shí)候執(zhí)行回調(diào)，并且把組件實(shí)例作為回調(diào)方法的參數(shù)。next(vm => {// 通過(guò) `vm` 訪問(wèn)組件實(shí)例console.log(vm)})},// beforeRouteEnter 是支持給 next 傳遞回調(diào)的唯一守衛(wèi)。// 對(duì)于 beforeRouteUpdate 和 beforeRouteLeave 來(lái)說(shuō)，this 已經(jīng)可用了，所以不支持傳遞回調(diào)，因?yàn)闆](méi)有必要了。beforeRouteUpdate (to, from, next) {// 在當(dāng)前路由改變，但是該組件被復(fù)用時(shí)調(diào)用// 舉例來(lái)說(shuō)，對(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)用。// 可以訪問(wèn)組件實(shí)例 `this`console.log('beforeRouteUpdate被調(diào)用：在當(dāng)前路由改變，但是該組件被復(fù)用時(shí)調(diào)用')next()},beforeRouteLeave (to, from, next) {// 導(dǎo)航離開(kāi)該組件的對(duì)應(yīng)路由時(shí)調(diào)用// 可以訪問(wèn)組件實(shí)例 `this`const answer = window.confirm('是否確認(rèn)離開(kāi)當(dāng)前頁(yè)面')if (answer) {console.log('beforeRouteLeave被調(diào)用：導(dǎo)航離開(kāi)該組件的對(duì)應(yīng)路由時(shí)調(diào)用')next()} else {next(false)}},

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