vue-router捕获路由参数的变化

在项目中经常碰到组件复用的情况，例如：/user/foo  导航到  /user/ bar , 原组件实例会被复用，组件生命周期钩子将不会触发。。。

如果你想对路由参数的变化做出响应的话（也就是监控路由参数的变化），vue官方提供了2种方法：

1、使用 watch 来监控  $route 对象

2、使用组件内守卫  beforeRouteUpdate  来捕获变化

  

$route

下边代码，从"/news/1"  导航到 "/news/2"  , to 意思是：目标路由对象；from意思是：离开的路由对象。。。

export default {
    name: "news",
    watch:{
      "$route"(to,from){
          console.log(to)
          console.log(from)
       }
    }
}

 

beforeRouteUpdate（（ to,from,next ）=>{ }）

export default {
    name: "news"
    beforeRouteUpdate(to,from,next){
        // xxx
        next()
    }
};

此守卫在之前文章——导航守卫中有讲到：

链接：https://blog.csdn.net/qq_42778001/article/details/102477217