浅谈vue-router路由切换 组件重用挖下的坑
问题描述：vue-router导航切换时，如果两个路由都渲染同个组件，组件会重（chong）用,组件的生命周期钩子不会再被调用,使得组件的一些数据无法根据path的改变得到更新
翻车现场再现：
这是我的/router/index.js的内容节选
exportdefaultnewRouter({
routes:[
{
path:'/main',
component:Main
},
{
path:'/get',
component:Main
}
]
})
这是我的Main.vue的内容节选
{{$router.currentRoute.path}}
以上情景很明显，我是想要显示路由跳转前和路由跳转后的path值
路由从/main跳转到了/get，理想情况是网页中显示的路由从/main变成了/get
但事实是网页没有一点变化,显示的内容依然是/main
车祸原因分析
从我的车况来看，我的这次路由跳转前后使用了完全相同的组件，通过仔细查看vue-router文档对应位置，发现了如下关键内容
当使用路由参数时，例如从/user/foo导航到/user/bar，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。
routeobject是immutable（不可变）的，每次成功的导航后都会产生一个新的对象。
这两个关键的信息表明，正常组件不复用时，组件内的route对象是最新路由对应的，但是组件复用时，由于组件的生命周期钩子不会再被调用，组件内的route对象还是原来的，不会得到更新，所以出现了页面的path信息跳转前后没有变化
前往救援
原因分析清楚了，开始解决吧，还好vue-router提供了解决的api如下
使用2.2中引入的beforeRouteUpdate守卫：
constUser={
template:'...',
beforeRouteUpdate(to,from,next){
//reacttoroutechanges...
//don'tforgettocallnext()
}
}
修改完后的Main.vue如下
data(){
return{
path:this.$router.currentRoute.path;
}
}
beforeRouteUpdate(to,from,next){
path=this.$router.currentRoute.path;
}
结果救援现场再次翻车
页面上的path依旧没有变化
又再次分析原因，查看vue-router文档对应位置，发现重要内容如下
beforeRouteUpdate(to,from,next){
//在当前路由改变，但是该组件被复用时调用
//举例来说，对于一个带有动态参数的路径/foo/:id，在/foo/1和/foo/2之间跳转的时候，
//由于会渲染同样的Foo组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
//可以访问组件实例`this`
},
上面说的是
/foo/:id，在/foo/1和/foo/2之间跳转的时候，
我的是从/main调到/get，并不符合上面的情况，活该翻车
一次真的救援
data(){
return{
path:this.$router.currentRoute.path;
}
}
watch:{
'$route'(to,from){
this.path=this.$router.currentRoute.path
}
}
这次真的救援成功了，页面的path从/main变成了/get
以上这篇浅谈vue-router路由切换组件重用挖下的坑就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。