vue 响应路由参数的变化

在我们用Vue做项目的时候，有时候需要在同一个路由下，只改变路由后面跟的参数值，当发生跳转的时候网址导航栏确实改变了参数，但是页面数据却没有根据路由的参数发生改变，需要手动刷新一下才有效果，但是这不是我们想要的效果。

例如从 /user/foo 导航到 /user/bar，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。详情看官网Vue router

想要达到我们预期的效果，路由参数的变化作出响应的话，你可以用 watch (监测变化) $route 对象：

方法一：

// 监听,当路由发生变化的时候执行

watch:{

  $route(to,from){

        console.log(to.path);

        // 对路由变化作出响应...

  }

},

方法二：

在父组件的router-view上加个key

<router-view :key="$route.fullPath"></router-view>

当然还有更多的解决方案，小飞就不一一实例了（因为小飞也不太懂，哈哈😄）。想要看更多的解决方案，小伙伴们可以看看其他大牛的博客，或者官网。