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


Posted in Javascript onNovember 01, 2019

问题描述: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路由切换 组件重用挖下的坑就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 简练的几个函数
Aug 29 Javascript
Javascript图像处理—虚拟边缘介绍及使用方法
Dec 27 Javascript
打印json对象的内容及JSON.stringify函数应用
Mar 29 Javascript
js 得到文件后缀(通过正则实现)
Jul 08 Javascript
基于pthread_create,readlink,getpid等函数的学习与总结
Jul 17 Javascript
AngularJS ng-bind-html 指令详解及实例代码
Jul 30 Javascript
使用jQuery的ajax方法向服务器发出get和post请求的方法
Jan 13 Javascript
完美解决浏览器跨域的几种方法(汇总)
May 08 Javascript
Angular整合zTree的示例代码
Jan 24 Javascript
JS伪继承prototype实现方法示例
Jun 20 Javascript
解决微信浏览器缓存站点入口文件(IIS部署Vue项目)
Jun 17 Javascript
基于javascript canvas实现五子棋游戏
Jul 08 Javascript
浅析js实现网页截图的两种方式
Nov 01 #Javascript
javascript使用链接跨域下载图片
Nov 01 #Javascript
async/await让异步操作同步执行的方法详解
Nov 01 #Javascript
浅谈Three.js截图并下载的大坑
Nov 01 #Javascript
vue中使用vee-validator完成表单校验方案
Nov 01 #Javascript
解决vue的过渡动画无法正常实现问题
Oct 31 #Javascript
VUE单页面切换动画代码(全网最好的切换效果)
Oct 31 #Javascript
You might like
PHP 源代码压缩小工具
2009/12/22 PHP
php及codeigniter使用session-cookie的方法(详解)
2017/04/06 PHP
php实现头像上传预览功能
2017/04/27 PHP
php压缩文件夹最新版
2018/07/18 PHP
javascript 动态添加表格行
2006/06/22 Javascript
JS 字符串连接[性能比较]
2009/05/10 Javascript
js使用for循环与innerHTML获取选中tr下td值
2014/09/26 Javascript
jQuery插件zoom实现图片全屏放大弹出层特效
2015/04/15 Javascript
js实现图片无缝滚动特效
2020/03/19 Javascript
详解Node.js 命令行程序开发教程
2017/06/07 Javascript
JS实现div模块的截图并下载功能
2017/10/17 Javascript
js/jquery遍历对象和数组的方法分析【forEach,map与each方法】
2019/02/27 jQuery
Webpack 4如何动态切割JS注入文件名详解
2019/07/09 Javascript
js实现鼠标点击页面弹出自定义文字效果
2019/12/24 Javascript
基于VSCode调试网页JavaScript代码过程详解
2020/07/20 Javascript
Javascript新手入门之字符串拼接与变量的应用
2020/12/03 Javascript
[06:06]2018DOTA2亚洲邀请赛主赛事第四日战况回顾 全明星赛欢乐上演
2018/04/07 DOTA
使用Python的urllib和urllib2模块制作爬虫的实例教程
2016/01/20 Python
Python安装第三方库及常见问题处理方法汇总
2016/09/13 Python
python实现简易版计算器
2020/06/22 Python
Django数据库连接丢失问题的解决方法
2018/12/29 Python
Python如何将装饰器定义为类
2020/07/30 Python
Python模拟登录requests.Session应用详解
2020/11/17 Python
html5+css3之CSS中的布局与Header的实现
2014/11/21 HTML / CSS
详解FireFox下Canvas使用图像合成绘制SVG的Bug
2019/07/10 HTML / CSS
波兰家具和室内装饰品购物网站:Vivre
2018/04/10 全球购物
网上快餐厅创业计划书
2014/02/01 职场文书
舞蹈兴趣小组活动总结
2014/07/07 职场文书
宾馆仓管员岗位职责
2014/07/27 职场文书
优秀教师先进个人事迹材料
2014/08/31 职场文书
大学生旷课检讨书1000字
2015/02/19 职场文书
2015年实习单位评语
2015/03/25 职场文书
2015年端午节活动方案
2015/05/05 职场文书
观看禁毒宣传片后的感想
2015/08/11 职场文书
Django中的JWT身份验证的实现
2021/05/07 Python
Python中super().__init__()测试以及理解
2021/12/06 Python