欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue監(jiān)聽路由變化的幾種方式小結(jié)

 更新時(shí)間：2022年05月26日 09:22:13   作者：star-1331  
這篇文章主要介紹了vue監(jiān)聽路由變化的幾種方式小結(jié)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

監(jiān)聽路由變化的幾種方式小結(jié)

vue頁面開發(fā)中，我們經(jīng)常需要根據(jù)路由的變化去實(shí)現(xiàn)一些操作，那么如何監(jiān)聽路由的變化呢？當(dāng)然是利用VUE中的watch，請(qǐng)看代碼。

一、監(jiān)聽路由從哪兒來到哪兒去

watch:{
?? ?$route(to,from){
?? ? ?console.log(from.path);//從哪來
?? ? ?console.log(to.path);//到哪去
?? ?}
}

二、監(jiān)聽路由變化獲取新老路由信息

?watch:{
? ? $route:{
? ? ? handler(val,oldval){
? ? ? ? console.log(val);//新路由信息
? ? ? ? console.log(oldval);//老路由信息
? ? ? },
? ? ? // 深度觀察監(jiān)聽
? ? ? deep: true
? ? }
? }

三、監(jiān)聽路由變化觸發(fā)方法

methods:{
? getPath(){
? ? console.log(1111)
? }
},
watch:{
? '$route':'getPath'
}

四、全局監(jiān)聽路由

在app.vue的create種加入下面代碼，然后進(jìn)行判斷

this.$router.beforeEach((to, from, next) => {
? ? console.log(to);
? ? next();
});

如何在組件中監(jiān)聽路由參數(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)聽路由參數(shù)的變化,就只能通過watch (監(jiān)測變化) $route 對(duì)象,或使用 beforeRouteUpdate 的組件內(nèi)守衛(wèi)。

方式一: 監(jiān)聽 $route

const User = {
? template: '...',
? watch: {
? ? $route(to, from) {
? ? ? // 對(duì)路由變化作出響應(yīng)...
? ? }
? }
}

方式二：通過組件內(nèi)的導(dǎo)航守衛(wèi)

beforeRouteUpdate ,（和created(){}生命周期函數(shù)同級(jí)別)

const User = {
? template: '...',
? beforeRouteUpdate(to, from, next) {
? ? // react to route changes...
? ? // don't forget to call next()
? }
}

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論