vue路由监听

一般都知道使用

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

方式进行路由切换

但是:

上面的方式只能针对子路由变换能监听到,也就是#/parent/child/类型的路由,当child或者其后的路由变化时才能触发该监听,parent变化时是监听不到的

那如何才能监听到parent的变化

其实很简单,使用vue的生命周期即可:
在vue的created周期中使用

this.$router.beforeEach((to, from, next) => {
    console.log(to);
    next();
});
// next()必须要调用,否则将不会进行跳转!!!

进行监听即可。
即完整的写法为:

created() {
  this.$router.beforeEach((to, from, next) => {
    console.log(to);
    next();
  });
  // next()必须要调用,否则将不会进行跳转!!!
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容