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>

总结

方法一看上去更繁琐,但亲测响应速度比方法二快。

上一篇:Vue使用bus进行组件间、父子路由间通信
下一篇:格式化Mybatis返回的Date时间

发表评论

最新留言

能坚持,总会有不一样的收获!
[***.219.124.196]2025年03月25日 16时02分41秒