Vue监听路由变化

Vue 监听页面路由变化

  最近使用Vue页面开发,遇到了两个路由同时共用一个页面,发现页面路由发生改变时页面不会跟着刷新,经过一番资料查阅发现可以利用Vue中 watch 来监听路由,记录下来当作记笔记了。

监听路由上一个页面和跳转页面

1
2
3
4
5
6
7

watch:{
$route(to,from){
console.log(from.path);//上一个页面
console.log(to.path);//跳转页面
}
}

监听路由信息变化新老路由信息

1
2
3
4
5
6
7
8
9
10
11
12
13

watch: {
$route:{
handler(newRoute, oldRoute){
// 监听当前页面路由
if(newRoute !== oldRoute){
// 要处理的操作
}
},
// 深度监听
deep: true
}
}

监听路由变化触发方法

1
2
3
4
5
6
7
8
9

methods: {
getRoute(){
console.log(this.$route.path);
}
},
watch: {
'$route': 'getRoute';
}
0%