
Vue路由嵌套刷新后页面没有重新渲染
发布日期:2021-05-08 03:02:52
浏览次数:9
分类:原创文章
本文共 652 字,大约阅读时间需要 2 分钟。
问题
在路由嵌套时,如果此时地址栏到了子路由下面,刷新页面路由地址肯定不会有变化,那么此时会出现子路由页面没有重新渲染的情况。
解决方法
方法1
在子路由的容器在router-view中加上条件渲染 v-if ,默认为true。让它显示出来,在父路由重新渲染完成后,将条件渲染的值变为false,在修改渲染条件数据之后使用 $nextTick,再将条件渲染的值变为true,相当于重新加载了一次子路由。
//步骤一<router-view v-if="routerAlive"></router-view>data(){ return{ routerAlive:true, } },mounted() { //步骤二 this.routerAlive = false; //步骤三 this.$nextTick(()=>{ this.routerAlive = true; }); }
方法2
其实上述方法的原理就是让浏览器认为是一个新的子路由,所以对其进行重新加载渲染,同理,另一种方法是给容器router-view一个key值即可完美解决,每次刷新的随机值都让容器看上去是一个新的。
<router-view :key="Math.random()"></router-view>
总结
方法一看上去更繁琐,但亲测响应速度比方法二快。
发表评论
最新留言
能坚持,总会有不一样的收获!
[***.219.124.196]2025年03月25日 16时02分41秒
关于作者

喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
1月份2月份GitHub上最热门的23个Java开源项目
2021-05-08
maven安装
2021-05-08
2020第十五届全国大学生智能汽车竞赛——4X4矩阵键盘+Flash调参系统
2021-05-08
合并两个有序数组
2021-05-08
Ubuntu 环境下使用中文输入法
2021-05-08
小白学习Vue(?)--model选项的使用(自定义组件文本框双向绑定)
2021-05-08
聊聊我的五一小假期
2021-05-08
面向对象之异常处理:多路捕获
2021-05-08
Python简易五子棋
2021-05-08
MySQL8.0.19 JDBC下载与使用
2021-05-08
Vue新建项目——页面初始化
2021-05-08
Cent OS 7.6 服务器软件安装(这篇博客主要是为了方便我配置云主机的)
2021-05-08
MySQL使用系列文章
2021-05-08
Node.js包使用系列(一)——修改NPM全局下载和缓存路径
2021-05-08
TDengine使用(一)——TDengine下载与安装
2021-05-08
ubuntu和windows之间无法复制粘贴
2021-05-08
启动加载器BootLoader
2021-05-08
力扣239. 滑动窗口最大值
2021-05-08
史上最全Vue的组件传值
2021-05-08