浅谈vue-router路由切换 组件重用挖下的坑
问题描述：vue-router导航切换 时，如果两个路由都渲染同个组件，组件会重（chong）用,组件的生命周期钩子不会再被调用,使得组件的一些数据无法根据 path的改变得到更新
翻车现场再现：
这是我的/router/index.js 的内容节选
export default new Router({
routes: [
{
path: '/main',
component: Main
},
{
path: '/get',
component: Main
}
]
})
这是我的 Main.vue的内容节选
<p>{{$router.currentRoute.path}}</p>
以上情景很明显 ，我是想要显示路由跳转前和路由跳转后的 path值
路由从 /main 跳转到了 /get ，理想情况是 网页中显示的路由从 /main 变成了 /get
但事实是网页没有一点变化 ,显示的内容依然是 /main
车祸原因分析
从我的车况来看， 我的这次路由跳转前后使用了完全相同的组件 ，通过仔细查看vue-router文档对应位置 ，发现了如下关键内容
当使用路由参数时，例如从 /user/foo 导航到 /user/bar，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。
route object 是 immutable（不可变） 的，每次成功的导航后都会产生一个新的对象。
这两个关键的信息 表明，正常组件不复用时，组件内的 route对象是最新路由 对应的， 但是组件复用时，由于组件的生命周期钩子不会再被调用，组件内的route对象还是原来的，不会得到更新，所以出现了页面的path 信息 跳转前后没有变化
前往救援
原因分析清楚了，开始解决吧，还好vue-router提供了解决的api 如下
使用 2.2 中引入的 beforeRouteUpdate 守卫：
const User = {
template: '...',
beforeRouteUpdate (to, from, next) {
// react to route changes...
// don't forget to call next()
}
}
修改完后的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路由切换 组件重用挖下的坑就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue ssr 指南详读,详细的介绍了什么是SSR以及如何使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-06-06
Vue使用 onMounted 确保在组件挂载后执行异步操作示例详解
在 Vue.js 或其他类似框架中，使用 onMounted 是为了确保在组件挂载后执行异步操作，这篇文章主要介绍了Vue使用onMounted确保在组件挂载后执行异步操作,需要的朋友可以参考下2023-06-06
element-ui如何取消el-table的hover状态(取消高亮显示)
在一个项目中需要对element-ui的table组件进行一些样式的修改,其中就包括对hover效果的处理,下面这篇文章主要给大家介绍了关于element-ui如何取消el-table的hover状态(取消高亮显示)的相关资料,需要的朋友可以参考下2022-11-11
这篇文章主要介绍了vue基于websocket实现智能聊天及吸附动画效果,主要功能是基于websocket实现聊天功能，封装了一个socket.js文件，使用Jwchat插件实现类似QQ、微信电脑端的功能，本文通过实例代码给大家介绍的非常详细，需要的朋友可以参考下2022-07-07
这篇文章主要介绍了Vue中qs插件的使用详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-02-02
这篇文章主要为大家详细介绍了vue实现日历表格（element-ui），文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-09-09
组件是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。这篇文章通过实例代码给大家介绍了Vue加载组件、动态加载组件的几种方式，需要的朋友参考下吧2018-08-08
这篇文章主要给大家介绍了关于Vue.js的复用组件开发流程的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2018-11-11
WebStorm作为一款功能强大的IDE,提供了丰富的调试功能和技巧,可以帮助你更高效地开发和调试Vue应用,这篇文章主要给大家介绍了关于webStorm debug vue项目的两种方案,需要的朋友可以参考下2024-07-07
今天小编就为大家分享一篇vue路由 遍历生成复数router-link的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-10-10
最新评论