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 getElementsByTagName
Jan 31 Javascript
jQuery中prevAll()方法用法实例
Jan 08 Javascript
招聘网站基于jQuery实现自动刷新简历
May 10 Javascript
浅析script标签中的defer与async属性
Nov 30 Javascript
js控制按钮,防止频繁点击响应的实例
Feb 15 Javascript
微信小程序 使用腾讯地图SDK详解及实现步骤
Feb 28 Javascript
vue滚动轴插件better-scroll使用详解
Oct 17 Javascript
基于mpvue的小程序项目搭建的步骤
May 22 Javascript
JavaScript设计模式之构造器模式(生成器模式)定义与用法实例分析
Jul 26 Javascript
详解angular2如何手动点击特定元素上的点击事件
Oct 16 Javascript
JS实现图片切换效果
Nov 17 Javascript
Vue实现剪贴板复制功能
Dec 31 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连接access数据库
2008/03/27 PHP
PHP下判断网址是否有效的代码
2011/10/08 PHP
PHP无限分类(树形类)的深入分析
2013/06/02 PHP
php usort 使用用户自定义的比较函数对二维数组中的值进行排序
2017/05/02 PHP
用javascript编写的第一人称射击游戏
2007/02/25 Javascript
js 深拷贝函数
2008/12/04 Javascript
jquery动画3.创建一个带遮罩效果的图片走廊
2012/08/24 Javascript
Jquery实现兼容各大浏览器的Enter回车切换输入焦点的方法
2014/09/01 Javascript
让javascript加载速度倍增的方法(解决JS加载速度慢的问题)
2014/12/12 Javascript
JavaScript之Object类型介绍
2015/04/01 Javascript
学习JavaScript设计模式(接口)
2015/11/26 Javascript
javascript每日必学之封装
2016/02/23 Javascript
jQuery使用中可能被XSS攻击的一些危险环节提醒
2016/05/24 Javascript
深入浅析JavaScript中的scrollTop
2016/07/11 Javascript
使用canvas及js简单生成验证码方法
2017/04/02 Javascript
Vue实现购物车场景下的应用
2017/11/27 Javascript
解决npm安装Electron缓慢网络超时导致失败的问题
2018/02/06 Javascript
Angularjs中的$apply及优化使用详解
2018/07/02 Javascript
vue项目中使用lib-flexible解决移动端适配的问题解决
2018/08/23 Javascript
vue实现多个元素或多个组件之间动画效果
2018/09/25 Javascript
JS实现选项卡效果的代码实例
2019/05/20 Javascript
vue从零实现一个消息通知组件的方法详解
2020/03/16 Javascript
python基础教程之数字处理(math)模块详解
2014/03/25 Python
Python处理JSON时的值报错及编码报错的两则解决实录
2016/06/26 Python
Python机器学习logistic回归代码解析
2018/01/17 Python
anaconda安装pytorch1.7.1和torchvision0.8.2的方法(亲测可用)
2021/02/01 Python
科沃斯机器人官网商城:Ecovacs
2016/08/29 全球购物
Qoo10台湾站:亚洲领先的在线市场
2018/05/15 全球购物
英国外籍人士的在线超市:British Corner Shop
2019/06/03 全球购物
大二学生职业生涯规划书
2014/02/05 职场文书
安全资料员岗位职责范本
2014/06/28 职场文书
学生未请假就回家检讨书
2014/09/22 职场文书
入党个人总结范文
2015/03/02 职场文书
2015年乡镇统计工作总结
2015/04/22 职场文书
学生党支部工作总结2015
2015/05/26 职场文书
2015年教师节主持词
2015/07/03 职场文书