Vue 监听路由变化

Vue.js 官方文档中提供了 导航完成后获取数据 和 在导航完成前获取数据 两种方法，我个人使用的是前者，这个需要小伙伴们自己按照需求来定。文档地址

现在着重说一下 导航完成后获取数据 中的不同的写法：

第一种

watch: {
   $route:{
      handler(val, oldVal){
         let that = this;
         console.log(val,'监控路由变化');
         if(val.name === '你的router配置的name值'){
            //在这里做你要做的事
         }
      },
      deep:true //深度监听
   }
}

或者

watch: {
   '$route':'getPath'
},
methods: {
   getPath(){
       console.log(this.$route.path);
       //你的逻辑代码或数据请求
   }
},

以上的这两种写法 只是单纯的去监听你的 router 的变化 也就是你 router 配置的 path 的变化。

实用场景：A页面通过 router-link 跳转B页面，通过 to="{name:' ',params:{}}" 传递参数，在B页面拿到你所传过来的参数后，路由发生变化，监听捕获数据，然后执行你你逻辑代码。

内容提升及补充：Vue Router 中的 在导航完成前获取数据 还提供了 beforeRouteEnter  beforeRouteUpdate 两个钩子函数

beforeRouteEnter (to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当钩子执行前，组件实例还没被创建
},

beforeRouteUpdate (to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
},

其中 beforeRouteEnter 当数据获取成功后只调用  next  方法。（ 官文原话 ）

 

---------------------------------------------------------------   END   ------------------------------------------------------------------

珍惜眼前人，莫要失去才懂珍惜~~~