Vue-cli3.0 监听路由变化的几种方式
在 vue 页面开发中,我们经常需要根据路由的变化去实现一些操作,那么如何监听路由的变化呢?下面将介绍这几种方式:
# 监听路由从哪儿来到哪儿去
<script>
export default {
watch:{
$route(to,from){
console.log(from.path);//从哪来
console.log(to.path);//到哪去
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# 监听路由变化获取新老路由信息
<script>
export default {
watch:{
$route:{
handler(val,oldval){
console.log(val);//新路由信息
console.log(oldval);//老路由信息
},
// 深度观察监听
deep: true
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
# 监听路由变化触发方法
<script>
export default {
methods:{
getPath(){ }
},
watch:{
'$route':'getPath'
}
}
</script>
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# 全局监听路由
在 mian.js
中加入下面代码,然后进行判断
import router from './router';
router.beforeEach((to, from, next) => {
console.log(to);
next();
});
1
2
3
4
5
2
3
4
5
上次更新: 2024/01/30, 00:35:17
- 01
- Node与GLIBC_2.27不兼容解决方案08-19
- 02
- Git清空本地文件跟踪缓存08-13