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 相关文章推荐
iis6+javascript Add an Extension File
Jun 13 Javascript
jQuery实现异步获取json数据的2种方式
Aug 29 Javascript
判断window.onload是否多次使用的方法
Sep 21 Javascript
理解Javascript的动态语言特性
Jun 17 Javascript
jquery事件的ready()方法使用详解
Nov 11 Javascript
MUI 上拉刷新/下拉加载功能实例代码
Apr 13 Javascript
mockjs,json-server一起搭建前端通用的数据模拟框架教程
Dec 18 Javascript
编写React组件项目实践分析
Mar 04 Javascript
Angular @HostBinding()和@HostListener()用法
Mar 05 Javascript
使用webpack搭建react开发环境的方法
May 15 Javascript
如何基于layui的laytpl实现数据绑定的示例代码
Apr 10 Javascript
JS 5种遍历对象的方式
Jun 16 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
索尼SONY SRF-S83/84电路分析和打磨
2021/03/02 无线电
再推荐十款免费的php开发工具
2015/11/09 PHP
PHP+Ajax实现的无刷新分页功能详解【附demo源码下载】
2017/07/03 PHP
Laravel框架在本地虚拟机快速安装的方法详解
2018/06/11 PHP
PHP实现新型冠状病毒疫情实时图的实例
2020/02/04 PHP
JS控制显示隐藏兼容问题(IE6、IE7、IE8)
2010/04/01 Javascript
jQuery 表格插件整理
2010/04/27 Javascript
表格奇偶行设置不同颜色的核心JS代码
2013/12/24 Javascript
JQuery显示隐藏页面元素的方法总结
2015/04/16 Javascript
socket.io实现在线群聊功能
2017/04/07 Javascript
vue 刷新之后 嵌套路由不变 重新渲染页面的方法
2018/09/13 Javascript
小程序云开发实战小结
2018/10/25 Javascript
vue结合element-ui使用示例
2019/01/24 Javascript
JS中注入eval, Function等系统函数截获动态代码
2019/04/03 Javascript
通过实例了解js函数中参数的传递
2019/06/15 Javascript
小程序click-scroll组件设计
2019/06/18 Javascript
微信小程序动态评分展示/五角星展示/半颗星展示/自定义长度展示功能的实现
2020/07/22 Javascript
vue-列表下详情的展开与折叠案例
2020/07/28 Javascript
Python的Flask框架中实现简单的登录功能的教程
2015/04/20 Python
Python调用系统底层API播放wav文件的方法
2017/08/11 Python
python twilio模块实现发送手机短信功能
2019/08/02 Python
用Pytorch训练CNN(数据集MNIST,使用GPU的方法)
2019/08/19 Python
详解python opencv、scikit-image和PIL图像处理库比较
2019/12/26 Python
Pytorch 计算误判率,计算准确率,计算召回率的例子
2020/01/18 Python
Python编程快速上手——强口令检测算法案例分析
2020/02/29 Python
Django框架配置mysql数据库实现过程
2020/04/22 Python
PyQt5.6+pycharm配置以及pyinstaller生成exe(小白教程)
2020/06/02 Python
css3实现波纹特效、H5实现动态波浪效果
2018/01/31 HTML / CSS
解决HTML5手机端页面缩放的问题
2017/10/27 HTML / CSS
影视制作岗位职责
2013/12/04 职场文书
环保建议书300字
2014/05/14 职场文书
作风整顿剖析材料
2014/09/30 职场文书
2014年教师个人工作总结
2014/11/10 职场文书
先进个人事迹材料(2016推荐版)
2016/03/01 职场文书
廉洁自律承诺书2016
2016/03/25 职场文书
总结高并发下Nginx性能如何优化
2021/11/01 Servers