vue-router路由切换时组件重用挖下的坑怎么解决-成都快上网建站

vue-router路由切换时组件重用挖下的坑怎么解决

这篇文章将为大家详细讲解有关vue-router路由切换时组件重用挖下的坑怎么解决,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

专注于为中小企业提供成都网站设计、网站制作服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业泸水免费做网站提供优质的服务。我们立足成都,凝聚了一批互联网行业人才,有力地推动了上千多家企业的稳健成长,帮助中小企业通过网站建设实现规模扩充和转变。

问题描述:vue-router导航切换 时,如果两个路由都渲染同个组件,组件会重(chong)用,组件的生命周期钩子不会再被调用,使得组件的一些数据无法根据 path的改变得到更新

翻车现场再现:

这是我的/router/index.js 的内容节选

export default new Router({
 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,原来的组件实例会被复用。因为两个路由都渲染同个组件,比起销毁再创建,复用则显得更加高效。不过,这也意味着组件的生命周期钩子不会再被调用。

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路由切换时组件重用挖下的坑怎么解决
浏览地址:http://kswjz.com/article/pdichd.html
扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流