博客
关于我
Vue路由嵌套刷新后页面没有重新渲染
阅读量:375 次
发布时间:2019-03-05

本文共 564 字,大约阅读时间需要 1 分钟。

问题

在路由嵌套时,如果此时地址栏到了子路由下面,刷新页面路由地址肯定不会有变化,那么此时会出现子路由页面没有重新渲染的情况。

解决方法

方法1

在子路由的容器在router-view中加上条件渲染 v-if ,默认为true。让它显示出来,在父路由重新渲染完成后,将条件渲染的值变为false,在修改渲染条件数据之后使用 $nextTick,再将条件渲染的值变为true,相当于重新加载了一次子路由。

//步骤一
data(){ return{ routerAlive:true, } },mounted() { //步骤二 this.routerAlive = false; //步骤三 this.$nextTick(()=>{ this.routerAlive = true; }); }
方法2

其实上述方法的原理就是让浏览器认为是一个新的子路由,所以对其进行重新加载渲染,同理,另一种方法是给容器router-view一个key值即可完美解决,每次刷新的随机值都让容器看上去是一个新的。

总结

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

转载地址:http://ptmg.baihongyu.com/

你可能感兴趣的文章
nginx反向代理解决跨域问题,使本地调试更方便
查看>>
nginx反向代理转发、正则、重写、负摘均衡配置案例
查看>>
Nginx反向代理配置
查看>>
Nginx启动SSL功能,并进行功能优化,你看这个就足够了
查看>>
nginx启动脚本
查看>>
Nginx和Tomcat的区别
查看>>
Nginx在Windows上和Linux上(Docker启动)分别配置基本身份认证示例
查看>>
Nginx在Windows下载安装启动与配置前后端请求代理
查看>>
Nginx在开发中常用的基础命令
查看>>
Nginx多域名,多证书,多服务配置,实用版
查看>>
nginx如何实现图片防盗链
查看>>
Nginx学习总结(11)——提高Nginx服务器的安全性,稳定性和性能的12种技巧
查看>>
Nginx学习总结(12)——Nginx各项配置总结
查看>>
Nginx学习总结(13)——Nginx 重要知识点回顾
查看>>
Nginx学习总结(14)——Nginx配置参数详细说明与整理
查看>>
Nginx学习总结(15)—— 提升 Web 应用性能的十个步骤
查看>>
Nginx学习总结(8)——Nginx服务器详解
查看>>
nginx学习笔记002---Nginx代理配置_案例1_实现了对前端代码的方向代理_并且配置了后端api接口的访问地址
查看>>
Nginx学习笔记(一) Nginx架构
查看>>
Nginx安装SSL模块 nginx: the “ssl” parameter requires ngx_http_ssl_module in /usr/local/nginx/conf/nginx
查看>>