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()必须要调用，否则将不会进行跳转！！！
}