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 相关文章推荐
关于B/S判断浏览器断开的问题讨论
Oct 29 Javascript
Javascript string 扩展库代码
Apr 09 Javascript
Jquery中LigerUi的弹出编辑框(实现方法)
Jul 09 Javascript
jquery indexOf使用方法
Aug 19 Javascript
JavaScript输出当前时间Unix时间戳的方法
Apr 06 Javascript
jQuery实现控制文字内容溢出用省略号(…)表示的方法
Feb 26 Javascript
AngularJS入门教程之双向绑定详解
Aug 18 Javascript
jQuery查找节点并获取节点属性的方法
Sep 09 Javascript
JavaScript实现无穷滚动加载数据
May 06 Javascript
Express系列之multer上传的使用
Oct 27 Javascript
小程序实现分类页
Jul 12 Javascript
jQuery实现简单弹幕效果
Nov 28 jQuery
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
PHP的面向对象编程
2006/10/09 PHP
php 静态页面中显示动态内容
2009/08/14 PHP
PHP批量上传图片的具体实现方法介绍.
2014/02/26 PHP
Laravel中获取路由参数Route Parameters的五种方法示例
2017/09/29 PHP
php创建类并调用的实例方法
2019/09/25 PHP
javascript小数计算出现近似值的解决办法
2010/02/06 Javascript
ASP.NET jQuery 实例7 通过jQuery来获取DropDownList的Text/Value属性值
2012/02/03 Javascript
javascript使用中为什么10..toString()正常而10.toString()出错呢
2013/01/11 Javascript
理解Javascript闭包
2013/11/01 Javascript
jQuery实现响应浏览器缩放大小并改变背景颜色
2014/10/31 Javascript
轻松创建nodejs服务器(4):路由
2014/12/18 NodeJs
JS实现网页Div层Clone拖拽效果
2015/09/26 Javascript
javascript实现拖动元素交换位置
2015/11/29 Javascript
实例分析nodejs模块xml2js解析xml过程中遇到的坑
2017/03/18 NodeJs
解决option标签selected="selected"属性失效的问题
2017/11/06 Javascript
React全家桶环境搭建过程详解
2018/05/18 Javascript
详解Chart.js轻量级图表库的使用经验
2018/05/22 Javascript
vue.js实现只能输入数字的输入框
2019/10/19 Javascript
vue+导航锚点联动-滚动监听和点击平滑滚动跳转实例
2019/11/13 Javascript
vue打开子组件弹窗都刷新功能的实现
2020/09/21 Javascript
Python的Django框架中settings文件的部署建议
2015/05/30 Python
wxPython的安装图文教程(Windows)
2017/12/28 Python
Python cookbook(数据结构与算法)从序列中移除重复项且保持元素间顺序不变的方法
2018/03/13 Python
python中将一个全部为int的list 转化为str的list方法
2018/04/09 Python
python对视频画框标记后保存的方法
2018/12/07 Python
Python帮你识破双11的套路
2019/11/11 Python
详解Css3新特性应用之过渡与动画
2017/01/10 HTML / CSS
CSS3实现超酷的黑猫警长首页
2016/04/26 HTML / CSS
H5调用相机拍照并压缩图片的实例代码
2017/07/20 HTML / CSS
HTML5 Canvas 旋转风车绘制
2017/08/18 HTML / CSS
英国奢侈品网站:MatchesFashion
2016/12/16 全球购物
2014年司法所工作总结
2014/11/22 职场文书
成绩报告单家长评语
2014/12/30 职场文书
经典祝酒词大全
2015/08/12 职场文书
Python中glob库实现文件名的匹配
2021/06/18 Python
python实现MD5进行文件去重的示例代码
2021/07/09 Python