前言:
向我们在vue项目中很多情况会遇到跨组件调用时间,有的时候vuex比较适合,有的时候是希望路由变换在调用方法。
一、监听路由从哪儿来到哪儿去
比如:我们想通过跳转改变路由从而 刷新侧边栏,或者头部选中的内容时候,就可以在你的侧边栏组件或者头部组件里面用下面这个,推荐第一个,很实用
watch:{
$route(to,from){
console.log(from.path);//从哪来
console.log(to.path);//到哪去
this.刷新方法
}
}
二、监听路由变化获取新老路由信息
watch:{
$route:{
handler(val,oldval){
console.log(val);//新路由信息
console.log(oldval);//老路由信息
},
// 深度观察监听
deep: true
}
}
三、监听路由变化触发方法
methods:{
getPath(){
console.log(1111)
}
},
watch:{
'$route':'getPath'
}
四、全局监听路由(这里一般我们都是router里面加跳转校验才会用到这个方法)
在app.vue的create种加入下面代码,然后进行判断
this.$router.beforeEach((to, from, next) => {
console.log(to);
next();
});