vue 刷新之后 嵌套路由不变 重新渲染页面的方法


Posted in Javascript onSeptember 13, 2018

解决嵌套路由刷新时,路由没有变化,正常情况下页面是不会重新渲染的

1、在router-view中加上条件渲染 v-if 默认为true。让它显示出来

vue 刷新之后 嵌套路由不变 重新渲染页面的方法

vue 刷新之后 嵌套路由不变 重新渲染页面的方法

2、写写一个reload方法,在页面刷新只有,点击某个查询条件的时候调用这个重载的方法

这是条件渲染变化了为false

在修改数据之后使用 $nextTick,

条件渲染变化了为true

则可以在回调中获取更新后的 DOM

vue 刷新之后 嵌套路由不变 重新渲染页面的方法

如果需要带有查询参数,可以用编程试导航,query来传参,但是这种方式可能刷新之后会有问题。

我的解决方法是在刷新之后点击页面中的某个条件的时候,将参数存在localstorage里面,这个时候执行reload方法来重新加载路由。这样无论路由变美变化页面都会重新加载,再次加载数据。。

这样还会有一个问题,就在在页面刷新的时候,查询条件会重置,这样存在localstorage里面的值也要清空。

解决方法就是监听浏览器的刷新事件

window.onbeforeunload = function(event) {
 sessionStorage.removeItem('querydataObj')
};

然后清除sessionstorage。

以上这篇vue 刷新之后 嵌套路由不变 重新渲染页面的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
XMLHTTPRequest的属性和方法简介
Nov 23 Javascript
如何在父窗口中得知window.open()出的子窗口关闭事件
Oct 15 Javascript
用Jquery实现滚动新闻
Feb 12 Javascript
jQuery插件slick实现响应式移动端幻灯片图片切换特效
Apr 12 Javascript
JavaScript+CSS实现仿天猫侧边网页菜单效果
Aug 25 Javascript
javascript面向对象程序设计高级特性经典教程(值得收藏)
May 19 Javascript
JS button按钮实现submit按钮提交效果
Nov 01 Javascript
JavaScript实现焦点进入文本框内关闭输入法的核心代码
Sep 20 Javascript
layer.open回调获取弹出层参数的实现方法
Sep 10 Javascript
JsonProperty 的使用方法详解
Oct 11 Javascript
vue-drag-chart 拖动/缩放图表组件的实例代码
Apr 10 Javascript
在项目vue中使用echarts的操作步骤
Sep 07 Javascript
解决vuejs项目里css引用背景图片不能显示的问题
Sep 13 #Javascript
Vue-不允许嵌套式的渲染方法
Sep 13 #Javascript
通过vue-cli3构建一个SSR应用程序的方法
Sep 13 #Javascript
vue.js单文件组件中非父子组件的传值实例
Sep 13 #Javascript
JavaScript数组方法的错误使用例子
Sep 13 #Javascript
vue仿element实现分页器效果
Sep 13 #Javascript
区别JavaScript函数声明与变量声明
Sep 12 #Javascript
You might like
复杂检索数据并分页显示的处理方法
2006/10/09 PHP
PHP学习之输出字符串(echo,print,printf,print_r和var_dump)
2011/04/17 PHP
php curl获取网页内容(IPV6下超时)的解决办法
2013/07/16 PHP
PHP模块memcached使用指南
2014/12/08 PHP
支持中文、字母、数字的PHP验证码
2015/05/04 PHP
php微信开发之批量生成带参数的二维码
2016/06/26 PHP
js字符编码函数区别分析
2008/06/05 Javascript
jquery()函数的三种语法介绍
2013/10/09 Javascript
js中prototype用法详细介绍
2013/11/14 Javascript
jqGrid随窗口大小变化自适应大小的示例代码
2013/12/28 Javascript
javascript每日必学之运算符
2016/02/16 Javascript
全面解析Bootstrap中tab(选项卡)的使用方法
2016/06/06 Javascript
Vue.js实战之利用vue-router实现跳转页面
2017/04/01 Javascript
浅谈jquery fullpage 插件增加头部和版权的方法
2018/03/20 jQuery
在Vue项目中使用jsencrypt.js对数据进行加密传输的方法
2019/04/17 Javascript
在vue项目中利用popstate处理页面返回的操作介绍
2020/08/06 Javascript
Antd的Table组件嵌套Table以及选择框联动操作
2020/10/24 Javascript
[01:19:34]2014 DOTA2国际邀请赛中国区预选赛 New Element VS Dream time
2014/05/22 DOTA
[01:27]2014DOTA2展望TI 剑指西雅图IG战队专访
2014/06/30 DOTA
将Django框架和遗留的Web应用集成的方法
2015/07/24 Python
两个命令把 Vim 打造成 Python IDE的方法
2016/03/20 Python
Python3.5以上版本lxml导入etree报错的解决方案
2019/06/26 Python
Django发送邮件和itsdangerous模块的配合使用解析
2019/08/10 Python
Django错误:TypeError at / 'bool' object is not callable解决
2019/08/16 Python
调试Django时打印SQL语句的日志代码实例
2019/09/12 Python
翻新二手苹果产品的网络领导者:Mac of all Trades
2017/12/19 全球购物
Sneaker Studio波兰:购买运动鞋
2018/04/28 全球购物
与UNIX有关的几个名词
2015/09/17 面试题
机械化及自动化毕业生的自我评价分享
2013/11/06 职场文书
应聘美工求职信
2013/11/07 职场文书
土建资料员岗位职责
2014/01/04 职场文书
乡镇消防工作实施方案
2014/03/27 职场文书
2015年大班保育员工作总结
2015/05/18 职场文书
职业规划从高考志愿专业选择开始
2019/08/08 职场文书
解决Windows Server2012 R2 无法安装 .NET Framework 3.5
2022/04/29 Servers
python读取mat文件生成h5文件的实现
2022/07/15 Python