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 火狐(firefox)不显示本地图片问题解决
Jul 05 Javascript
基于jquery的弹出提示框始终处于窗口的居中位置(类似于alert弹出框的效果)
Sep 28 Javascript
jQuery 网易相册鼠标移动显示隐藏效果实现代码
Mar 31 Javascript
为什么Node.js会这么火呢?Node.js流行的原因
Dec 01 Javascript
JavaScript控制网页层收起和展开效果的方法
Apr 15 Javascript
轻松实现Bootstrap图片轮播
Apr 20 Javascript
javaScript给元素添加多个class的简单实现
Jul 20 Javascript
原生ajax处理json格式数据的实例代码
Dec 25 Javascript
Node.js中流(stream)的使用方法示例
Jul 16 Javascript
Vue2.X 通过AJAX动态更新数据
Jul 17 Javascript
解决vue接口数据赋值给data没有反应的问题
Aug 27 Javascript
wepy--用vantUI 实现上弹列表并选择相应的值操作
Nov 03 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开发中常用的字符串操作函数
2011/02/08 PHP
基于PHP文件操作的详细诠释
2013/06/21 PHP
PHP中error_reporting()用法详解
2015/08/31 PHP
laravel 时间格式转时间戳的例子
2019/10/11 PHP
IE8 原生JSON支持
2009/04/13 Javascript
Javascript 异步加载详解(浏览器在javascript的加载方式)
2012/05/20 Javascript
JavaScript 实现类的多种方法实例
2013/05/01 Javascript
jQuery实现的一个自定义Placeholder属性插件
2014/08/11 Javascript
js不能获取隐藏的div的宽度只能先显示后获取
2014/09/04 Javascript
JS实现转动随机数抽奖特效代码
2020/04/16 Javascript
javascript字符串替换函数如何一次性全部替换掉
2015/10/30 Javascript
angular实现form验证实例代码
2017/01/17 Javascript
js 输入框 正则表达式(菜鸟必看教程)
2017/02/19 Javascript
详解Angular2学习笔记之Html属性绑定
2018/01/03 Javascript
vue的常用组件操作方法应用分析
2018/04/13 Javascript
vue使用技巧及vue项目中遇到的问题
2018/06/04 Javascript
vue.js 实现输入框动态添加功能
2018/06/25 Javascript
Vue-component全局注册实例
2018/09/06 Javascript
swiper在vue项目中loop循环轮播失效的解决方法
2018/09/15 Javascript
小程序扫描普通链接二维码跳转小程序指定界面方法
2019/05/07 Javascript
使用vue中的混入mixin优化表单验证插件问题
2019/07/02 Javascript
微信小程序防止多次点击跳转和防止表单组件输入内容多次验证功能(函数防抖)
2019/09/19 Javascript
win与linux系统中python requests 安装
2016/12/04 Python
Python下实现的RSA加密/解密及签名/验证功能示例
2017/07/17 Python
python3+selenium实现126邮箱登陆并发送邮件功能
2019/01/23 Python
Python中的集合介绍
2019/01/28 Python
python 计算积分图和haar特征的实例代码
2019/11/20 Python
美国儿童运动鞋和服装零售商:Kids Foot Locker
2017/08/05 全球购物
巴西婴儿用品商店:Bebe Store
2017/11/23 全球购物
欧洲最古老的鞋厂:Peter Kaiser
2019/11/05 全球购物
黄河象教学反思
2014/02/10 职场文书
爱我中华演讲稿
2014/05/20 职场文书
幼师大班个人总结
2015/02/13 职场文书
python函数指定默认值的实例讲解
2021/03/29 Python
Python 循环读取数据内存不足的解决方案
2021/05/25 Python
Vue提供的三种调试方式你知道吗
2022/01/18 Vue.js