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 json2 使用方法
Mar 16 Javascript
JavaScript 事件绑定及深入
Apr 13 Javascript
用JavaScript获取页面文档内容的实现代码
Jun 10 Javascript
AngularJS Bootstrap详细介绍及实例代码
Jul 28 Javascript
js 原型对象和原型链理解
Feb 09 Javascript
微信扫码支付零云插件版实例详解
Apr 26 Javascript
详解使用create-react-app添加css modules、sasss和antd
Jul 31 Javascript
JS跨域请求的问题解析
Dec 03 Javascript
django js 实现表格动态标序号的实例代码
Jul 12 Javascript
react MPA 多页配置详解
Oct 18 Javascript
JS正则表达式验证端口范围(0-65535)
Jan 06 Javascript
微信小程序基于高德地图API实现天气组件(动态效果)
Oct 22 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
TP5框架页面跳转样式操作示例
2020/04/05 PHP
javascript 打印页面代码
2009/03/24 Javascript
javascript操作cookie_获取与修改代码
2009/05/21 Javascript
Jquery iframe内部出滚动条
2010/02/11 Javascript
基于jQuery架构javascript基础体系
2011/01/01 Javascript
node.js中的fs.unlinkSync方法使用说明
2014/12/15 Javascript
ES6教程之for循环和Map,Set用法分析
2017/04/10 Javascript
解决vue里碰到 $refs 的问题的方法
2017/07/13 Javascript
vue-cli脚手架config目录下index.js配置文件的方法
2018/03/13 Javascript
对angularJs中ng-style动态改变样式的实例讲解
2018/09/30 Javascript
Vue自定义指令上报Google Analytics事件统计的方法
2019/02/25 Javascript
基于vue、react实现倒计时效果
2019/08/26 Javascript
[22:59]VGJ.S vs VG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python通过websocket与js客户端通信示例分析
2014/06/25 Python
Python实现学生成绩管理系统
2020/04/05 Python
python高效过滤出文件夹下指定文件名结尾的文件实例
2018/10/21 Python
Pandas过滤dataframe中包含特定字符串的数据方法
2018/11/07 Python
redis数据库及与python交互用法简单示例
2019/11/01 Python
python set集合使用方法解析
2019/11/05 Python
利用Python代码实现一键抠背景功能
2019/12/29 Python
PyCharm License Activation激活码失效问题的解决方法(图文详解)
2020/03/12 Python
Django数据模型中on_delete使用详解
2020/11/30 Python
python3代码输出嵌套式对象实例详解
2020/12/03 Python
CSS3的Flexbox布局的简明入门指南
2016/04/08 HTML / CSS
美国益智玩具购物网站:Fat Brain Toys
2017/11/03 全球购物
接口的多继承会带来哪些问题
2015/08/17 面试题
求职者简历中的自我评价
2013/10/20 职场文书
销售文员的岗位职责
2013/11/20 职场文书
销售实习自我鉴定
2013/12/07 职场文书
六月份红领巾广播稿
2014/02/03 职场文书
项目总经理岗位职责
2014/02/14 职场文书
小学生开学感言
2014/02/28 职场文书
班委竞选演讲稿
2014/04/28 职场文书
安全学习心得体会范文
2016/01/18 职场文书
2019年大学生职业生涯规划书
2019/03/25 职场文书
Python学习之时间包使用教程详解
2022/03/21 Python