您的位置：首页 > Web前端 > Vue.js

浅谈vue-router路由切换组件重用挖下的坑

2019-11-04 18:06 2983 查看

问题描述：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 router 路由切换

相关文章推荐

新的分享

章节导航

浅谈vue-router路由切换 组件重用挖下的坑

您可能感兴趣的文章:

浅谈vue-router路由切换组件重用挖下的坑