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 相关文章推荐
比较全的JS checkbox全选、取消全选、删除功能代码
Dec 19 Javascript
JavaScript Event学习第六章 事件的访问
Feb 07 Javascript
提升你网站水平的jQuery插件集合推荐
Apr 19 Javascript
JS 各种网页尺寸判断实例方法
Apr 18 Javascript
利用js定义一个导航条菜单
Mar 14 Javascript
JS设计模式之数据访问对象模式的实例讲解
Sep 30 Javascript
spirngmvc js传递复杂json参数到controller的实例
Mar 29 Javascript
js纯前端实现腾讯cos文件上传功能的示例代码
May 14 Javascript
electron实现静默打印的示例代码
Aug 12 Javascript
JS实现百度搜索框关键字推荐
Feb 17 Javascript
Vue 封装防刷新考试倒计时组件的实现
Jun 05 Javascript
如何使用JS console.log()技巧提高工作效率
Oct 14 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中iconv函数使用方法
2008/05/24 PHP
php知道与问问的采集插件代码
2010/10/12 PHP
php设计模式 Visitor 访问者模式
2011/06/28 PHP
PHP函数microtime()用法与说明
2013/12/04 PHP
PHP中实现接收多个name相同但Value不相同表单数据实例
2015/02/03 PHP
php实现根据身份证获取精准年龄
2020/02/26 PHP
js字母大小写转换实现方法总结
2013/11/13 Javascript
JavaScript异步加载浅析
2014/12/28 Javascript
Js和JQuery获取鼠标指针坐标的实现代码分享
2015/05/25 Javascript
js中编码函数:escape,encodeURI与encodeURIComponent详解
2017/03/21 Javascript
JS栈stack类的实现与使用方法示例
2019/01/31 Javascript
JS实现的杨辉三角【帕斯卡三角形】算法示例
2019/02/26 Javascript
Vue keepAlive 数据缓存工具实现返回上一个页面浏览的位置
2019/05/10 Javascript
微信打开网址添加在浏览器中打开提示的办法
2019/05/20 Javascript
vue中filters 传入两个参数 / 使用两个filters的实现方法
2019/07/15 Javascript
基于JavaScript获取base64图片大小
2019/10/18 Javascript
jquery 插件重新绑定的处理方法分析
2019/11/23 jQuery
JS获取当前时间的年月日时分秒及时间的格式化的方法
2019/12/18 Javascript
[04:52]第二届DOTA2亚洲邀请赛主赛事第一天比赛集锦:OG娜迦海妖放大配合谜团大中3人
2017/04/02 DOTA
python tensorflow基于cnn实现手写数字识别
2018/01/01 Python
python使用magic模块进行文件类型识别方法
2018/12/08 Python
python list转置和前后反转的例子
2019/08/26 Python
对Python 中矩阵或者数组相减的法则详解
2019/08/26 Python
Python使用扩展库pywin32实现批量文档打印实例
2020/04/09 Python
python 实现两个线程交替执行
2020/05/02 Python
Python常用数字处理基本操作汇总
2020/09/10 Python
您的网上新华书店:文轩网
2016/08/24 全球购物
非常详细的C#面试题集
2016/07/13 面试题
机电一体化专业推荐信
2013/12/03 职场文书
高考励志标语
2014/06/05 职场文书
春游踏青活动方案
2014/08/14 职场文书
交流会主持词
2015/07/02 职场文书
2015年四年级班主任工作总结
2015/10/22 职场文书
详解python网络进程
2021/06/15 Python
详解Go语言运用广度优先搜索走迷宫
2021/06/23 Python
Java存储没有重复元素的数组
2022/04/29 Java/Android