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 相关文章推荐
Javascript 两个窗体之间传值实现代码
Sep 25 Javascript
jQuery maxlength文本字数限制插件
Apr 16 Javascript
js用Date对象处理时间实现思路及代码
Jan 31 Javascript
jquery多选项卡效果实例代码(附效果图)
Mar 23 Javascript
jQuery功能函数详解
Feb 01 Javascript
JQuery中DOM加载与事件执行实例分析
Jun 13 Javascript
浅析Node.js的Stream模块中的Readable对象
Jul 29 Javascript
js实现当复选框选择匿名登录时隐藏登录框效果
Aug 14 Javascript
bootstrap是什么_动力节点Java学院整理
Jul 14 Javascript
JavaScript事件发布/订阅模式原理与用法分析
Aug 21 Javascript
使用vuex存储用户信息到localStorage的实例
Nov 11 Javascript
ES6如何用一句代码实现函数的柯里化
Jan 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 字符串编码截取函数(兼容utf-8和gb2312)
2009/05/02 PHP
PHP 文章中的远程图片采集到本地的代码
2009/07/30 PHP
PHP如何解决网站大流量与高并发的问题
2011/06/25 PHP
一个图片地址分解程序(用于PHP小偷程序)
2014/08/23 PHP
php中session与cookie的比较
2015/01/27 PHP
php简单生成随机数的方法
2015/07/30 PHP
解决PHP 7编译安装错误:cannot stat ‘phar.phar’: No such file or directory
2017/02/25 PHP
PHP查找一列有序数组是否包含某值的方法
2020/02/07 PHP
深入解析PHP底层机制及相关原理
2020/12/11 PHP
新鲜出炉的js tips提示效果
2011/04/03 Javascript
Moment.js 不容错过的超棒Javascript日期处理类库
2012/04/15 Javascript
js模拟hashtable的简单实例
2014/03/06 Javascript
jQuery实现下拉框多选 jquery-multiselect 的实例代码
2016/07/14 Javascript
nodejs和C语言插入mysql数据库乱码问题的解决方法
2017/04/14 NodeJs
vue 将页面公用的头部组件化的方法
2017/12/18 Javascript
vue: WebStorm设置快速编译运行的方法
2018/10/18 Javascript
微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例
2018/12/11 Javascript
js指定日期增加指定月份的实现方法
2018/12/19 Javascript
浅谈js闭包理解
2019/04/01 Javascript
js实现网页版贪吃蛇游戏
2020/02/22 Javascript
maptalks+three.js+vue webpack实现二维地图上贴三维模型操作
2020/08/10 Javascript
vue swipeCell滑动单元格(仿微信)的实现示例
2020/09/14 Javascript
python 从远程服务器下载日志文件的程序
2013/02/10 Python
Python数据分析之双色球基于线性回归算法预测下期中奖结果示例
2018/02/08 Python
python实现连续变量最优分箱详解--CART算法
2019/11/22 Python
Python变量作用域LEGB用法解析
2020/02/04 Python
tensorflow之变量初始化(tf.Variable)使用详解
2020/02/06 Python
周生生珠宝香港官网:Chow Sang Sang(香港及海外配送)
2019/09/05 全球购物
精选鞋类、服装和配饰的全球领先目的地:Bodega
2021/02/27 全球购物
澳大利亚最受欢迎的超级商场每日优惠:Catch
2020/11/17 全球购物
小学生法制教育心得体会
2016/01/14 职场文书
入党申请书怎么写?
2019/06/21 职场文书
十二月早安励志心语大全
2019/12/03 职场文书
《自然之道》读后感3篇
2019/12/17 职场文书
常用的Python代码调试工具总结
2021/06/23 Python
spring 项目实现限流方法示例
2022/07/15 Java/Android