在我们用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>
当然还有更多的解决方案,小飞就不一一实例了(因为小飞也不太懂,哈哈😄)。想要看更多的解决方案,小伙伴们可以看看其他大牛的博客,或者官网。