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 验证日期的函数
Mar 18 Javascript
过虑特殊字符输入的js代码
Aug 05 Javascript
javascript 兼容所有浏览器的DOM扩展功能
Aug 01 Javascript
利用JS判断用户是否上网(连接网络)
Dec 23 Javascript
JavaScript Canvas绘制圆形时钟效果
Aug 20 Javascript
jQuery 控制文本框自动缩小字体填充
Jun 16 jQuery
激动人心的 Angular HttpClient的源码解析
Jul 10 Javascript
基于vue和react的spa进行按需加载的实现方法
Sep 29 Javascript
js计时事件实现圆形时钟
Mar 25 Javascript
基于Vue中使用节流Lodash throttle详解
Oct 30 Javascript
node静态服务器实现静态读取文件或文件夹
Dec 03 Javascript
vue实现简单数据双向绑定
Apr 28 Vue.js
解决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循环输出数据库内容的代码
2008/05/24 PHP
php 需要掌握的东西 不做浮躁的人
2009/12/28 PHP
php从数组中随机抽取一些元素的代码
2012/11/05 PHP
两种php实现图片上传的方法
2016/01/22 PHP
Smarty保留变量用法分析
2016/05/23 PHP
PHP基于imagick扩展实现合成图片的两种方法【附imagick扩展下载】
2017/11/14 PHP
php文件上传原理与实现方法详解
2019/12/20 PHP
iframe 自适应高度[在IE6 IE7 FF下测试通过]
2009/04/13 Javascript
JavaScript中的fontsize()方法使用详解
2015/06/08 Javascript
JS更改select内option属性的方法
2015/10/14 Javascript
JS实现的表格操作类详解(添加,删除,排序,上移,下移)
2015/12/22 Javascript
javascript防篡改对象实例详解
2017/04/10 Javascript
PHP实现记录代码运行时间封装类实例教程
2017/05/08 Javascript
Bootstrap与Angularjs的模态框实例代码
2017/08/03 Javascript
vue-router+vuex addRoutes实现路由动态加载及菜单动态加载
2017/09/28 Javascript
Angularjs按需查询实例代码
2017/10/30 Javascript
微信小程序实现红包雨功能
2018/07/11 Javascript
angular ng-model 无法获取值的处理方法
2018/10/02 Javascript
puppeteer实现html截图的示例代码
2019/01/10 Javascript
详解vue-cli3多页应用改造
2019/06/04 Javascript
ES6基础之数组和对象的拓展实例详解
2019/08/22 Javascript
原生js实现文件上传、下载、封装等实例方法
2020/01/05 Javascript
JavaScript Image对象实现原理实例解析
2020/08/26 Javascript
Js跳出两级循环方法代码实例
2020/09/22 Javascript
以视频爬取实例讲解Python爬虫神器Beautiful Soup用法
2016/01/20 Python
对Tensorflow中的矩阵运算函数详解
2018/07/27 Python
政法干警核心价值观心得体会
2014/09/11 职场文书
社区灵活就业证明
2014/11/03 职场文书
2014个人年终工作总结范文
2014/12/15 职场文书
画展邀请函
2015/01/31 职场文书
2015年图书馆个人工作总结
2015/05/26 职场文书
2015年安全生产月工作总结
2015/07/27 职场文书
2015小学新教师个人工作总结
2015/10/14 职场文书
MySQL系列之四 SQL语法
2021/07/02 MySQL
python中Matplotlib绘制直线的实例代码
2021/07/04 Python
世界十大动漫制作公司排行榜,迪士尼上榜,第二是美国代表性文化符
2022/03/18 欧美动漫