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 相关文章推荐
IE8下关于querySelectorAll()的问题
May 13 Javascript
jquery json 实例代码
Dec 02 Javascript
jquery创建一个新的节点对象(自定义结构/内容)的好方法
Jan 21 Javascript
使用jQuery和PHP实现类似360功能开关效果
Feb 12 Javascript
Javascript实现苹果悬浮虚拟按钮
Apr 10 Javascript
jQuery Easyui 验证两次密码输入是否相等
May 13 Javascript
jQuery动态改变多行文本框高度的方法
Sep 07 Javascript
通过jquery实现页面的动画效果(实例代码)
Sep 18 Javascript
js与jquery分别实现tab标签页功能的方法
Nov 18 Javascript
五步轻松实现zTree的使用
Nov 01 Javascript
微信小程序实现图片翻转效果的实例代码
Sep 20 Javascript
小程序实现上传视频功能
Aug 18 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
php中文本操作的类
2007/03/17 PHP
php读取大文件示例分享(文件操作类)
2014/04/13 PHP
php+mysqli使用面向对象方式更新数据库实例
2015/01/29 PHP
javascript OFFICE控件测试代码
2009/12/08 Javascript
Javascript使用post方法提交数据实例
2015/08/03 Javascript
js+css实现有立体感的按钮式文字竖排菜单效果
2015/09/01 Javascript
jquery实现简单的遮罩层
2016/01/08 Javascript
js导出excel文件的简洁方法(推荐)
2016/11/02 Javascript
jQuery实现二维码扫描功能
2017/01/09 Javascript
作为老司机使用 React 总结的 11 个经验教训
2017/04/08 Javascript
vue checkbox 全选 数据的绑定及获取和计算方法
2018/02/09 Javascript
vue项目实战总结篇
2018/02/11 Javascript
VUE简单的定时器实时刷新的实现方法
2019/01/20 Javascript
深入理解vue-class-component源码阅读
2019/02/18 Javascript
Vue axios 将传递的json数据转为form data的例子
2019/10/29 Javascript
JS时间戳与日期格式互相转换的简单方法示例
2021/01/30 Javascript
[01:03:59]2018DOTA2亚洲邀请赛3月30日 小组赛B组VGJ.T VS Secret
2018/03/31 DOTA
Python抽象类的新写法
2015/06/18 Python
python中的字典操作及字典函数
2018/01/03 Python
Flask 让jsonify返回的json串支持中文显示的方法
2018/03/26 Python
详解django2中关于时间处理策略
2019/03/06 Python
Python统计一个字符串中每个字符出现了多少次的方法【字符串转换为列表再统计】
2019/05/05 Python
Flask框架单例模式实现方法详解
2019/07/31 Python
Python Subprocess模块原理及实例
2019/08/26 Python
鞋子女王塔玛拉·梅隆同名奢侈品牌:Tamara Mellon
2017/11/22 全球购物
英国领先的瓷砖专家:Walls and Floors
2018/04/27 全球购物
Otticanet意大利:最顶尖的世界名牌眼镜, 能得到打折季的价格
2019/03/10 全球购物
教师个人剖析材料
2014/02/05 职场文书
会计学毕业生求职信
2014/06/25 职场文书
2014学校领导四风对照检查材料思想汇报
2014/09/23 职场文书
2014年机关作风建设工作总结
2014/10/23 职场文书
股权转让协议书
2014/12/07 职场文书
小浪底导游词
2015/02/12 职场文书
入学证明
2015/06/23 职场文书
2016大学生就业指导课心得体会
2016/01/15 职场文书
nginx配置proxy_pass中url末尾带/与不带/的区别详解
2021/03/31 Servers