浅谈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中URL编码函数代码
Jan 11 Javascript
根据身份证号自动输出相关信息(籍贯,出身日期,性别)
Nov 15 Javascript
js去字符串前后空格的实现方法
Feb 26 Javascript
js仿支付宝填写支付密码效果实现多方框输入密码
Mar 09 Javascript
jquery实现全选和全不选功能效果的实现代码【推荐】
May 05 Javascript
JS数组操作(数组增加、删除、翻转、转字符串、取索引、截取(切片)slice、剪接splice、数组合并)
May 20 Javascript
12306 刷票脚本及稳固刷票脚本(防挂)
Jan 04 Javascript
详解JS中遍历语法的比较
Apr 07 Javascript
JavaScript中最常用的10种代码简写技巧总结
Jun 28 Javascript
关于meta viewport中target-densitydpi属性详解(推荐)
Aug 18 Javascript
解决vue项目打包后提示图片文件路径错误的问题
Jul 04 Javascript
vant实现购物车功能
Jun 29 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 获取远程网页内容的代码(fopen,curl已测)
2011/06/06 PHP
WordPress中给媒体文件添加分类和标签的PHP功能实现
2015/12/31 PHP
Jquery写一个鼠标拖动效果实现原理与代码
2012/12/24 Javascript
写出高效jquery代码的19条指南
2014/03/19 Javascript
AngularJS模块学习之Anchor Scroll
2016/01/19 Javascript
JQuery EasyUI的使用
2016/02/24 Javascript
实现一个简单的vue无限加载指令方法
2017/01/10 Javascript
JavaScript数组_动力节点Java学院整理
2017/06/26 Javascript
vue 2.0封装model组件的方法
2017/08/03 Javascript
Mac下通过brew安装指定版本的nodejs教程
2018/05/17 NodeJs
vuex + axios 做登录验证 并且保存登录状态的实例
2018/09/16 Javascript
详解vue几种主动刷新的方法总结
2019/02/19 Javascript
vue实现多个echarts根据屏幕大小变化而变化实例
2020/07/19 Javascript
[06:06]2018DOTA2亚洲邀请赛主赛事第四日战况回顾 全明星赛欢乐上演
2018/04/07 DOTA
python静态方法实例
2015/01/14 Python
python模拟Django框架实例
2016/05/17 Python
Python基础篇之初识Python必看攻略
2016/06/23 Python
opencv python 基于KNN的手写体识别的实例
2018/08/03 Python
django的settings中设置中文支持的实现
2019/04/28 Python
python 字典套字典或列表的示例
2019/12/16 Python
python爬虫开发之使用python爬虫库requests,urllib与今日头条搜索功能爬取搜索内容实例
2020/03/10 Python
使用Keras构造简单的CNN网络实例
2020/06/29 Python
python 使用三引号时容易犯的小错误
2020/10/21 Python
Django自带用户认证系统使用方法解析
2020/11/12 Python
python使用dlib进行人脸检测和关键点的示例
2020/12/05 Python
在阿联酋购买翻新手机和平板电脑:Teckzu
2021/02/12 全球购物
信息管理专业学生自荐信格式
2013/09/22 职场文书
经济信息管理专业大学生求职信
2013/09/27 职场文书
弘扬民族精神演讲稿
2014/05/07 职场文书
婚前财产协议书范本
2014/10/19 职场文书
就业导师推荐信范文
2015/03/27 职场文书
实施意见格式范本
2015/06/05 职场文书
2016年感恩节寄语
2015/12/07 职场文书
2016年师德学习心得体会
2016/01/12 职场文书
springboot使用Redis作缓存使用入门教程
2021/07/25 Redis
python对文档中元素删除,替换操作
2022/04/02 Python