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中克隆一个数组的实现代码
Dec 06 Javascript
jQuery实现渐变弹出层和弹出菜单的方法
Feb 20 Javascript
JS实现超简单的仿QQ折叠菜单效果
Sep 21 Javascript
JavaScript中removeChild 方法开发示例代码
Aug 15 Javascript
浅谈jquery采用attr修改form表单enctype不起作用的问题
Nov 25 Javascript
详解angular中如何监控dom渲染完毕
Jan 03 Javascript
jquery实现自定义图片裁剪功能【推荐】
Mar 08 Javascript
vue 使用Jade模板写html,stylus写css的方法
Feb 23 Javascript
vue中使用better-scroll实现滑动效果及注意事项
Nov 15 Javascript
深入理解使用Vue实现Context-Menu的思考与总结
Mar 09 Javascript
nuxt 实现在其它js文件中使用store的方式
Nov 05 Javascript
动态实现element ui的el-table某列数据不同样式的示例
Jan 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
PHP中for循环语句的几种变型
2006/11/26 PHP
PHP实现视频文件上传完整实例
2014/08/28 PHP
php中smarty变量修饰用法实例分析
2015/06/11 PHP
PHP+Ajax无刷新带进度条图片上传示例
2017/02/08 PHP
Laravel使用消息队列需要注意的一些问题
2017/12/13 PHP
IE6/7 and IE8/9/10(IE7模式)依次隐藏具有absolute或relative的父元素和子元素后再显示父元素
2011/07/31 Javascript
Javascript对象中关于setTimeout和setInterval的this介绍
2012/07/21 Javascript
JavaScript改变HTML元素的样式改变CSS及元素属性
2013/11/12 Javascript
jquery文本框中的事件应用以输入邮箱为例
2014/05/06 Javascript
jQuery图片切换插件jquery.cycle.js使用示例
2014/06/16 Javascript
纯javascript实现图片延时加载方法
2015/08/21 Javascript
详解Javascript事件驱动编程
2016/01/03 Javascript
3种不同的ContextMenu右键菜单实现代码
2016/11/03 Javascript
jQuery实现文字自动横移
2017/01/08 Javascript
移动前端图片压缩上传的实例
2017/12/06 Javascript
30分钟快速实现小程序语音识别功能
2018/11/27 Javascript
vue中在vuex的actions中请求数据实例
2019/11/08 Javascript
Python文件操作基本流程代码实例
2017/12/11 Python
Django之模型层多表操作的实现
2019/01/08 Python
python读写csv文件并增加行列的实例代码
2019/08/01 Python
python mqtt 客户端的实现代码实例
2019/09/25 Python
在pandas中遍历DataFrame行的实现方法
2019/10/23 Python
tensorflow查看ckpt各节点名称实例
2020/01/21 Python
wxPython修改文本框颜色过程解析
2020/02/14 Python
matplotlib quiver箭图绘制案例
2020/04/17 Python
手把手教你配置JupyterLab 环境的实现
2021/02/02 Python
您的网上新华书店:文轩网
2016/08/24 全球购物
美国家居装饰购物网站:Amanda Lindroth
2020/03/25 全球购物
J2SDK1.5与J2SDK5.0有什么区别
2012/09/19 面试题
办公室主任主任岗位责任制
2014/02/11 职场文书
刑事辩护授权委托书格式
2014/10/13 职场文书
毕业论文致谢范文
2015/05/14 职场文书
行政答辩状范文
2015/05/21 职场文书
地道战观后感500字
2015/06/04 职场文书
小学语文的各类谚语(70首)
2019/08/15 职场文书
五年级作文之想象作文
2019/10/30 职场文书