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 相关文章推荐
基于jquery的点击链接插入链接内容的代码
Jul 31 Javascript
javascript调试之DOM断点调试法使用技巧分享
Apr 15 Javascript
用jquery实现的一个超级简单的下拉菜单
May 18 Javascript
ActiveX控件与Javascript之间的交互示例
Jun 04 Javascript
使用vue编写一个点击数字计时小游戏
Aug 31 Javascript
jQuery联动日历的实例解析
Dec 02 Javascript
理解javascript中的闭包
Jan 11 Javascript
JS实现的抛物线运动效果示例
Jan 30 Javascript
详解Vue This$Store总结
Dec 17 Javascript
Vuex的实战使用详解
Oct 31 Javascript
深入理解 TypeScript Reflect Metadata
Dec 12 Javascript
15分钟学会vue项目改造成SSR(小白教程)
Dec 17 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抓取https的内容的代码
2010/04/06 PHP
jQuery prev ~ siblings选择器使用介绍
2013/08/09 Javascript
thinkphp中常用的系统常量和系统变量
2014/03/05 Javascript
nodejs开发微博实例
2015/03/25 NodeJs
JavaScript 动态加载脚本和样式的方法
2015/04/13 Javascript
jQuery中$.extend()用法实例
2015/06/24 Javascript
js实现数组转换成json
2015/06/26 Javascript
理解javascript正则表达式
2016/03/08 Javascript
使用PHP+JavaScript将HTML页面转换为图片的实例分享
2016/04/18 Javascript
jQuery的框架介绍
2016/05/11 Javascript
利用jQuery解析获取JSON数据
2017/04/08 jQuery
js实现手机web图片左右滑动效果
2017/12/29 Javascript
浅谈Vuejs中nextTick()异步更新队列源码解析
2017/12/31 Javascript
使用vue中的v-for遍历二维数组的方法
2018/03/07 Javascript
Vue 中对图片地址进行拼接的方法
2018/09/03 Javascript
vue-cli 3.x配置跨域代理的实现方法
2019/04/12 Javascript
解决layui追加或者动态修改的表单元素“没效果”的问题
2019/09/18 Javascript
vue中进行微博分享的实例讲解
2019/10/14 Javascript
[06:43]DAC2018 4.5 SOLO赛 Maybe vs Paparazi
2018/04/06 DOTA
python通过elixir包操作mysql数据库实例代码
2018/01/31 Python
Python实现随机生成手机号及正则验证手机号的方法
2018/04/25 Python
Python使用xlrd实现读取合并单元格
2020/07/09 Python
Python模拟登录requests.Session应用详解
2020/11/17 Python
python 利用matplotlib在3D空间中绘制平面的案例
2021/02/06 Python
使用Python webdriver图书馆抢座自动预约的正确方法
2021/03/04 Python
汽车维修专业个人求职信范文
2014/01/01 职场文书
竞选村长演讲稿
2014/04/28 职场文书
村干部培训方案
2014/05/02 职场文书
环保志愿者活动总结
2014/06/27 职场文书
公共场所禁烟倡议书
2014/08/30 职场文书
假释思想汇报范文
2014/10/11 职场文书
开会通知短信大全
2015/04/20 职场文书
行政复议答复书
2015/07/01 职场文书
2015年政治教研组工作总结
2015/07/22 职场文书
Nginx工作原理和优化总结。
2021/04/02 Servers
一篇文章弄清楚Ajax请求的五个步骤
2022/03/17 Javascript