vue页面跳转实现页面缓存操作


Posted in Javascript onJuly 22, 2020

业务需求

打野在A页面野区进行一波骚操作打了一只蓝爸爸,然后点击导航栏跑到B页面的野区秀操作打了一只红爸爸,然后他又回到A野区,希望A野区还是只有一只蓝爸爸被打的状态,其他野没被偷

第一步

在路由里面设置需要缓存的页面

vue页面跳转实现页面缓存操作

第二步

使用keep-alive属性包裹需要缓存的页面使用v-if判断,为true的是需要缓存的,false是不需要缓存的

vue页面跳转实现页面缓存操作

第三步

在需要缓存的页面设置导航钩子,在A野区离开时将值设置为false保证离开当前野区不被偷

vue页面跳转实现页面缓存操作

第四步

在其他野区浪一波离开时设置为true,保证回到A野区的时候野区不被刷新,还是原来的状态

vue页面跳转实现页面缓存操作

补充知识:vue keep - alive 使用只有从固定页面跳转过来的才缓存当前页面

问题描述

使用 keep-alive + beforeRouteLeave 判断进入缓存页面的时候设置 keep-alive为true或false 但是无法满足需求 造成A页面 跳转到 B页面之后 无缓存 C页面跳转到B页面后 有缓存 但是 再次从A页面跳转到B页面 B页面跳转C页面完成后把上次的数据带出来了

解决方法

A - B 或 C-B都设置缓存 触发keep-alive的activated 钩子 利用 vuex在B页面判断是从哪个页面跳转过来的 如果是从A页面跳转过来的 重置B页面所有数据 否则不进行任何操作就行了

以上这篇vue页面跳转实现页面缓存操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js中的json对象详细介绍
Oct 29 Javascript
javascript二维数组转置实例
Jan 22 Javascript
javascript插件开发的一些感想和心得
Feb 28 Javascript
Canvas 制作动态进度加载水球详解及实例代码
Dec 09 Javascript
Angular.js中ng-if、ng-show和ng-hide的区别介绍
Jan 20 Javascript
JavaScript实现简单动态进度条效果
Apr 06 Javascript
使用RxJS更优雅地进行定时请求详析
Jun 02 Javascript
使用vue实现各类弹出框组件
Jul 03 Javascript
微信小程序new Date()方法失效问题解决方法
Jul 29 Javascript
如何基于原生javaScript生成带图片的二维码
Nov 21 Javascript
解决ant-design-vue中menu菜单无法默认展开的问题
Oct 31 Javascript
js观察者模式的弹幕案例
Nov 23 Javascript
ES2020系列之空值合并运算符 '??'
Jul 22 #Javascript
解决vue单页面 回退页面 keeplive 缓存问题
Jul 22 #Javascript
vue移动端弹起蒙层滑动禁止底部滑动操作
Jul 22 #Javascript
在vue中实现禁止屏幕滚动,禁止屏幕滑动
Jul 22 #Javascript
vue 弹出遮罩层样式实例
Jul 22 #Javascript
vue中解决拖拽改变存在iframe的div大小时卡顿问题
Jul 22 #Javascript
vue中实现拖动调整左右两侧div的宽度的示例代码
Jul 22 #Javascript
You might like
swfupload 多文件上传实现代码
2008/08/27 PHP
解析PHP可变函数的经典用法
2013/06/20 PHP
Zend Framework创建自己的动作助手详解
2016/03/05 PHP
php根据年月获取当月天数及日期数组的方法
2016/11/30 PHP
浅谈PHP发送HTTP请求的几种方式
2017/07/25 PHP
Laravel重定向,a链接跳转,控制器跳转示例
2019/10/22 PHP
javascript之ESC(第二类混淆)
2007/05/06 Javascript
document.documentElement && document.documentElement.scrollTop
2007/12/01 Javascript
javascript replace方法与正则表达式
2008/02/19 Javascript
js 实现菜单左右滚动显示示例介绍
2013/11/21 Javascript
删除Javascript Object中间的key
2014/11/18 Javascript
jQuery中siblings()方法用法实例
2015/01/08 Javascript
NodeJS 实现手机短信验证模块阿里大于功能
2017/06/19 NodeJs
vuejs使用$emit和$on进行组件之间的传值的示例
2017/10/04 Javascript
浅谈如何通过node.js对数据进行MD5加密
2018/05/16 Javascript
每个 JavaScript 工程师都应懂的33个概念
2018/10/22 Javascript
今天,小程序正式支持 SVG
2019/04/20 Javascript
150行Node.js实现的dns代理工具
2019/08/02 Javascript
webpack中的模式(mode)使用详解
2020/02/20 Javascript
javascript使用canvas实现饼状图效果
2020/09/08 Javascript
在vue中使用jsonp进行跨域请求接口操作
2020/10/29 Javascript
Python导出数据到Excel可读取的CSV文件的方法
2015/05/12 Python
详细介绍Python的鸭子类型
2016/09/12 Python
Python黑帽编程 3.4 跨越VLAN详解
2016/09/28 Python
Python中正则表达式详解
2017/05/17 Python
Python中shapefile转换geojson的示例
2019/01/03 Python
Python实现投影法分割图像示例(一)
2020/01/17 Python
使用pytorch 筛选出一定范围的值
2020/06/28 Python
如何使用 Flask 做一个评论系统
2020/11/27 Python
比利时买床:Beter Bed
2017/12/06 全球购物
安全宣传标语口号
2014/06/06 职场文书
学生夜不归宿检讨书
2014/09/23 职场文书
新学期红领巾广播稿
2014/10/04 职场文书
农村党建工作汇报材料
2014/10/27 职场文书
党员评议自我评价
2015/03/03 职场文书
ConstraintValidator类如何实现自定义注解校验前端传参
2021/06/18 Java/Android