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系列(12) 变量对象(Variable Object)
Jan 16 Javascript
Array 重排序方法和操作方法的简单实例
Jan 24 Javascript
利用try-catch判断变量是已声明未声明还是未赋值
Mar 12 Javascript
JavaScript中的值类型详细介绍
Dec 29 Javascript
javascript实现百度地图鼠标滑动事件显示、隐藏
Apr 02 Javascript
javascript实现的字符串与十六进制表示字符串相互转换方法
Jul 17 Javascript
js面向对象之常见创建对象的几种方式(工厂模式、构造函数模式、原型模式)
Nov 09 Javascript
表单input项使用label同时引用Bootstrap库导致input点击效果区增大问题
Oct 11 Javascript
js中class的点击事件没有效果的解决方法
Oct 13 Javascript
js指定日期增加指定月份的实现方法
Dec 19 Javascript
Vue编程式跳转的实例代码详解
Jul 10 Javascript
vue实现移动端div拖动效果
Mar 03 Vue.js
解决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
Windows下编译PHP5.4和xdebug全记录
2015/04/03 PHP
php实现在线通讯录功能(附源码)
2016/05/13 PHP
PHP 应用容器化以及部署方法
2018/02/12 PHP
PHP实现的XXTEA加密解密算法示例
2018/08/28 PHP
Laravel 5+ .env环境配置文件详解
2020/04/06 PHP
记录几个javascript有关的小细节
2007/04/02 Javascript
基于JavaScript实现继承机制之原型链(prototype chaining)的详解
2013/05/07 Javascript
在表单提交前进行验证的几种方式整理
2013/07/31 Javascript
javascript获取url上某个参数的方法
2013/11/08 Javascript
jQuery函数的第二个参数获取指定上下文中的DOM元素
2014/05/19 Javascript
JavaScript中的console.group()函数详细介绍
2014/12/29 Javascript
CSS3实现动态背景登录框的代码
2015/07/28 Javascript
详解Node.js:events事件模块
2016/11/24 Javascript
值得分享和收藏的xmlplus组件学习教程
2017/05/05 Javascript
CentOS 安装NodeJS V8.0.0的方法
2017/06/15 NodeJs
详解vue中computed 和 watch的异同
2017/06/30 Javascript
微信小程序实现电子签名功能
2020/07/29 Javascript
[04:49]期待西雅图之战 2016国际邀请赛中国区预选赛WINGS战队赛后采访
2016/06/29 DOTA
Python多线程同步Lock、RLock、Semaphore、Event实例
2014/11/21 Python
python轻松实现代码编码格式转换
2015/03/26 Python
python输入多行字符串的方法总结
2019/07/02 Python
pytorch 移动端部署之helloworld的使用
2020/10/30 Python
python 窃取摄像头照片的实现示例
2021/01/08 Python
加拿大奢华时装品牌:Mackage
2018/01/10 全球购物
应届生妇产科护士求职信
2013/10/27 职场文书
护理专业毕业生推荐信
2013/10/31 职场文书
怎样写演讲稿
2014/01/04 职场文书
结婚典礼证婚词
2014/01/08 职场文书
应届生简历中的自我评价
2014/01/13 职场文书
养殖项目策划书范文
2014/01/13 职场文书
生日派对邀请函
2014/01/13 职场文书
大学生冰淇淋店商业计划书
2014/01/14 职场文书
读群众路线心得体会
2014/03/07 职场文书
房屋出租协议书
2014/04/10 职场文书
政工师工作总结2015
2015/05/26 职场文书
奥巴马开学演讲观后感
2015/06/12 职场文书