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 相关文章推荐
淘宝搜索框效果实现分析
Mar 05 Javascript
基于jquery的无刷新分页技术
Jun 11 Javascript
angularJS 入门基础
Feb 09 Javascript
对Web开发中前端框架与前端类库的一些思考
Mar 27 Javascript
jQuery实现的经典滑动门效果
Sep 22 Javascript
jquery解析json格式数据的方法(对象、字符串)
Nov 24 Javascript
javascript self对象使用详解
Oct 18 Javascript
javascript遍历json对象的key和任意js对象属性实例
Mar 09 Javascript
zTree节点文字过多的处理方法
Nov 24 Javascript
Node.js 多线程完全指南总结
Mar 27 Javascript
vue+springboot图片上传和显示的示例代码
Feb 14 Javascript
jquery制作的移动端购物车效果完整示例
Feb 24 jQuery
解决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
日本十大最佳动漫,全都是二次元的神级作品
2019/10/05 日漫
利用curl 多线程 模拟 并发的详解
2013/06/14 PHP
在PHP上显示JFreechart画的统计图方法
2013/11/03 PHP
Javascript - HTML的request类
2007/01/09 Javascript
Ajax执行顺序流程及回调问题分析
2012/12/10 Javascript
Js数组的操作push,pop,shift,unshift等方法详细介绍
2012/12/28 Javascript
Jquery中LigerUi的弹出编辑框(实现方法)
2013/07/09 Javascript
java、javascript实现附件下载示例
2014/08/14 Javascript
nodejs教程之制作一个简单的文章发布系统
2014/11/21 NodeJs
使用jspdf生成pdf报表
2015/07/03 Javascript
iscroll.js的上拉下拉刷新时无法回弹的解决方法
2016/02/18 Javascript
JavaScript实现图片轮播组件代码示例
2016/11/22 Javascript
Vue分页组件实例代码
2017/04/17 Javascript
websocket+node.js实现实时聊天系统问题咨询
2017/05/17 Javascript
微信小程序返回多级页面的实现方法
2017/10/27 Javascript
JS的函数调用栈stack size的计算方法
2018/06/24 Javascript
在vue项目中引入高德地图及其UI组件的方法
2018/09/04 Javascript
微信小程序基于picker实现级联菜单
2019/02/15 Javascript
详解如何使用nvm管理Node.js多版本
2019/05/06 Javascript
Javascript 关于基本类型和引用类型的个人理解
2019/11/01 Javascript
[05:15]2018年度CS GO社区贡献奖-完美盛典
2018/12/16 DOTA
PyChar学习教程之自定义文件与代码模板详解
2017/07/17 Python
python+pyqt5实现图片批量缩放工具
2019/03/18 Python
安装好Pycharm后如何配置Python解释器简易教程
2019/06/28 Python
Python udp网络程序实现发送、接收数据功能示例
2019/12/09 Python
Python字典添加,删除,查询等相关操作方法详解
2020/02/07 Python
应届毕业生专业个人求职自荐信格式
2013/11/20 职场文书
就业自荐书
2013/12/05 职场文书
银行个人求职自荐信范文
2013/12/16 职场文书
校园自助餐厅的创业计划书
2013/12/26 职场文书
销售总监岗位职责
2014/01/04 职场文书
给女儿的表扬信
2014/01/18 职场文书
2014自主招生自荐信策略
2014/01/27 职场文书
致接力运动员广播稿
2014/02/17 职场文书
毕业生就业推荐表自我鉴定
2019/06/20 职场文书
python迷宫问题深度优先遍历实例
2021/06/20 Python