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 相关文章推荐
JQuery筛选器全系列介绍
Aug 27 Javascript
js 判断浏览器使用的语言示例代码
Mar 22 Javascript
一款由jquery实现的整屏切换特效
Sep 15 Javascript
js实现仿QQ秀换装效果的方法
Mar 04 Javascript
JavaScript中原型链存在的问题解析
Sep 25 Javascript
JavaScript中 DOM操作方法小结
Apr 25 Javascript
vue-router beforeEach跳转路由验证用户登录状态
Dec 26 Javascript
微信小程序实现基于三元运算验证手机号/姓名功能示例
Jan 19 Javascript
javascript设计模式 ? 桥接模式原理与应用实例分析
Apr 13 Javascript
Javascript幻灯片播放功能实现过程解析
May 07 Javascript
js定时器出现第一次延迟的原因及解决方法
Jan 04 Javascript
JavaScript中时间格式化新思路toLocaleString()
Nov 07 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
在mysql数据库原有字段后增加新内容
2009/11/26 PHP
解析PHP可变函数的经典用法
2013/06/20 PHP
php中call_user_func函数使用注意事项
2014/11/21 PHP
PHP使用PHPexcel导入导出数据的方法
2015/11/14 PHP
thinkphp中字符截取函数msubstr()用法分析
2016/01/09 PHP
php把时间戳转换成多少时间之前函数的实例
2016/11/16 PHP
php7 参数、整形及字符串处理机制修改实例分析
2020/05/25 PHP
JavaScript中this的9种应用场景及三种复合应用场景
2015/09/12 Javascript
Jquery判断form表单数据是否变化
2016/03/30 Javascript
jquery中实现时间戳与日期相互转换
2016/04/12 Javascript
Nodejs进阶:express+session实现简易登录身份认证
2017/04/24 NodeJs
深入浅析javascript继承体系
2017/10/23 Javascript
vue项目中使用百度地图的方法
2018/06/08 Javascript
用jQuery将JavaScript对象转换为querystring查询字符串的方法
2018/11/12 jQuery
快速了解Vue父子组件传值以及父调子方法、子调父方法
2020/07/15 Javascript
Array.filter中如何正确使用Async
2020/11/04 Javascript
py中的目录与文件判别代码
2008/07/16 Python
Python 调用DLL操作抄表机
2009/01/12 Python
Python 解析XML文件
2009/04/15 Python
浅谈python为什么不需要三目运算符和switch
2016/06/17 Python
python实现自动发送邮件发送多人、群发、多附件的示例
2018/01/23 Python
python爬虫基础教程:requests库(二)代码实例
2019/04/09 Python
pycharm访问mysql数据库的方法步骤
2019/06/18 Python
浅谈在django中使用redirect重定向数据传输的问题
2020/03/13 Python
python matplotlib模块基本图形绘制方法小结【直线,曲线,直方图,饼图等】
2020/04/26 Python
python不到50行代码完成了多张excel合并的实现示例
2020/05/28 Python
Django DRF认证组件流程实现原理详解
2020/08/17 Python
浅谈HTML5新增及移除的元素
2016/06/27 HTML / CSS
html5的画布canvas——画出弧线、旋转的图形实例代码+效果图
2013/06/09 HTML / CSS
Sephora丝芙兰马来西亚官方网站:国际化妆品购物
2018/03/15 全球购物
JPA的特点
2014/10/25 面试题
自荐书格式
2013/12/01 职场文书
高二生物教学反思
2014/01/27 职场文书
优秀共青团员事迹材料
2014/12/25 职场文书
Python 处理表格进行成绩排序的操作代码
2021/07/26 Python
Python函数中apply、map、applymap的区别
2021/11/27 Python