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 removeChild 使用注意事项
Apr 11 Javascript
Javascript根据指定下标或对象删除数组元素
Dec 21 Javascript
jquery解析XML及获取XML节点名称的实现代码
May 18 Javascript
原生js和css实现图片轮播效果
Feb 07 Javascript
微信小程序 共用变量值的实现
Jul 12 Javascript
JS 中可以提升幸福度的小技巧(可以识别更多另类写法)
Jul 28 Javascript
JavaScript实现数组全排列、去重及求最大值算法示例
Jul 30 Javascript
关于Vue Router中路由守卫的应用及在全局导航守卫中检查元字段的方法
Dec 09 Javascript
js canvas实现橡皮擦效果
Dec 20 Javascript
vue 对axios get pust put delete封装的实例代码
Jan 05 Javascript
js 计算月/周的第一天和最后一天代码
Feb 01 Javascript
nuxt 服务器渲染动态设置 title和seo关键字的操作
Nov 05 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 图像函数大举例(非原创)
2009/06/20 PHP
PHP学习之整理字符串
2011/04/17 PHP
深入Memcache的Session数据的多服务器共享详解
2013/06/13 PHP
2个自定义的PHP in_array 函数,解决大量数据判断in_array的效率问题
2014/04/08 PHP
PHP文件缓存类实现代码
2015/10/26 PHP
基础的WordPress插件制作教程
2015/11/24 PHP
JavaScript 常见对象类创建代码与优缺点分析
2009/12/07 Javascript
jquery 利用show和hidden实现级联菜单示例代码
2013/08/09 Javascript
js获取当月最后一天实例代码
2013/11/19 Javascript
BootStrap响应式导航条实例介绍
2016/05/06 Javascript
jQuery DataTables插件自定义Ajax分页实例解析
2020/04/28 Javascript
js时间比较 js计算时间差的简单实现方法
2016/08/26 Javascript
微信小程序 ES6Promise.all批量上传文件实现代码
2017/04/14 Javascript
Javascript es7中比较实用的两个方法示例
2017/07/21 Javascript
Angularjs的$http异步删除数据详解及实例
2017/07/27 Javascript
jQuery实现左右滑动的toggle方法
2018/03/03 jQuery
vue awesome swiper异步加载数据出现的bug问题
2018/07/03 Javascript
VUE中setTimeout和setInterval自动销毁案例
2020/09/07 Javascript
[01:36:19]Secret vs NB 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
值得收藏,Python 开发中的高级技巧
2018/11/23 Python
python使用MQTT给硬件传输图片的实现方法
2019/05/05 Python
使用Python和Scribus创建一个RGB立方体的方法
2019/07/17 Python
在notepad++中实现直接运行python代码
2019/12/18 Python
pytorch 实现模型不同层设置不同的学习率方式
2020/01/06 Python
浅谈pandas.cut与pandas.qcut的使用方法及区别
2020/03/03 Python
Django框架安装及项目创建过程解析
2020/09/14 Python
一款利用html5和css3动画排列人物头像的实例演示
2014/12/05 HTML / CSS
英国性感内衣和睡衣品牌:Bluebella
2018/01/26 全球购物
Black Halo官方网站:购买连衣裙、礼服和连体裤
2018/06/13 全球购物
Roxy荷兰官方网站:冲浪、滑雪板、服装和配件
2019/10/22 全球购物
c++工程师面试问题
2013/08/04 面试题
优秀求职信范文分享
2013/12/19 职场文书
企业三严三实学习心得体会
2014/10/13 职场文书
四风问题自查自纠工作情况报告
2014/10/28 职场文书
学校群众路线专项整治方案
2014/10/31 职场文书
男方家长婚礼答谢词
2015/09/29 职场文书