快捷導(dǎo)航

vue路由監(jiān)聽的一些常用方式

更新時(shí)間：2023年10月09日 09:13:05 作者：前端-文龍剛

有時(shí)在頁(yè)面刷新或者返回等操作時(shí),想監(jiān)聽路由變化進(jìn)行數(shù)據(jù)更新等操作,下面這篇文章主要給大家介紹了關(guān)于vue路由監(jiān)聽的一些常用方式,需要的朋友可以參考下

場(chǎng)景：

我們?cè)谧鲰?xiàng)目時(shí)，會(huì)遇到部分需求是根絕路由的切換來判斷某些值，下面介紹部分常用的監(jiān)聽方式

一、通過 watch 進(jìn)行監(jiān)聽

// 方式1、監(jiān)聽路由 $route 變化  一般監(jiān)聽
export default{
watch: {
$route(to, from){
console.log('路由變化了')
console.log('當(dāng)前頁(yè)面路由：' + to.path);
console.log('上一個(gè)路由：' + from);
},
}
}
// 方式2、監(jiān)聽路由 $route 變化, 使用handler函數(shù) 深度監(jiān)聽路由
export default{
watch: {
'$route': { // $route可以用引號(hào)，也可以不用引號(hào)  監(jiān)聽的對(duì)象
handler(to, from){
console.log('路由變化了')
console.log('當(dāng)前頁(yè)面路由：' + to);
console.log('上一個(gè)路由：' + from);
},
deep: true, // 深度觀察監(jiān)聽 設(shè)置為 true
immediate: true, // 第一次初始化渲染就可以監(jiān)聽到
}
}
}
// 方式3、監(jiān)聽路由 $route 變化,觸發(fā)methods里的方法
export default{
watch: {
'$route': 'initData'
},
methods: {
initData(){
console.log('路由變化了')
}
}
}
// 方式4、監(jiān)聽路由的 path 變化
export default{
watch: {
'$route.path'(toPath, fromPath){
console.log('路由變化了')
console.log('當(dāng)前頁(yè)面路由地址：' + toPath)
console.log('上一個(gè)路由地址：' + fromPath)
},
}
}
// 方式5、監(jiān)聽路由的 path 變化, 使用handler函數(shù)
export default{
watch: {
'$route.path': {
handler(toPath, fromPath){
console.log('路由變化了')
console.log('當(dāng)前頁(yè)面路由地址：' + toPath)
console.log('上一個(gè)路由地址：' + fromPath)
},
deep: true, // 深度監(jiān)聽
immediate: true, // 第一次初始化渲染就可以監(jiān)聽到
}
}
}
// 方式6、監(jiān)聽路由的 path 變化,觸發(fā)methods里的方法
export default{
watch: {
'$route.path': 'initData'
},
methods: {
initData(){
console.log('路由變化了')
}
}
}

二、通過鉤子函數(shù)beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave進(jìn)行監(jiān)聽

export default{
beforeRouteEnter(to, from, next){
// 渲染該組件前調(diào)用這個(gè)鉤子，因此組件還未被創(chuàng)建，不能獲取this
console.log(this) // 結(jié)果為：undefined
console.log('beforeRouteEnter')
next()
},
beforeRouteUpdate(to, from, next){
//這個(gè)組件是被復(fù)用的時(shí)候調(diào)用，比如帶有動(dòng)態(tài)參數(shù)的路由跳轉(zhuǎn)：/add/11 跳轉(zhuǎn)到 /detail/12
console.log(this) // 可以訪問this
console.log('beforeRouteUpdate')
next()
},
beforeRouteLeave(to, from, next){
// 導(dǎo)航離開當(dāng)前路由的時(shí)候被調(diào)用，this可以被訪問到
console.log(this) // 可以訪問this
console.log('beforeRouteLeave')
next()
},
}

三、全局路由監(jiān)聽 this.$router.beforeEach

// 方式1、在App.vue的create中進(jìn)行全局路由監(jiān)聽
export default  {
name:  'App',
created() {
this.$router.beforeEach((to, from, next) =&gt; {
console.log(to);
console.log(from);
next()
})
}
}
// 方式2、在路由文件（/router/index.js）中進(jìn)行全局路由監(jiān)聽
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
let routes = [
{
path: '/login',
component: resolve =&gt; require(['@/views/login'], resolve),
},
]
let router = new Router({
mode: 'history', // 去掉 url 中的 #
scrollBehavior: () =&gt; ({ y: 0 }),
base: process.env.VUE_APP_BASE_DOMAIN,
routes,
})
router.beforeEach((to, from, next) =&gt; {
console.log(to);
console.log(from);
next()
})
export {
routes
router
}