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 相关文章推荐
基于JQuery.timer插件实现一个计时器
Apr 25 Javascript
Javascript计算时间差的函数分享
Jul 04 Javascript
form.submit()不能提交表单的原因分析
Oct 23 Javascript
javascript点击按钮实现隐藏显示切换效果
Feb 03 Javascript
JS函数定义方式的区别介绍
Mar 22 Javascript
JavaScript Math 对象常用方法总结
Apr 28 Javascript
使用jQuery Mobile框架开发移动端Web App的入门教程
May 17 Javascript
详解原生js实现offset方法
Jun 15 Javascript
AngularJS+Bootstrap3多级导航菜单的实现代码
Aug 16 Javascript
总结js函数相关知识点
Feb 27 Javascript
JS中使用cavas截图网页并解决跨域及模糊问题
Nov 13 Javascript
VUE-ElementUI 自定义Loading图操作
Nov 11 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
php新建文件自动编号的思路与实现
2011/06/27 PHP
php错误、异常处理机制(补充)
2012/05/07 PHP
PHP header()函数使用详细(301、404等错误设置)
2013/04/17 PHP
php中的Base62类(适用于数值转字符串)
2013/08/12 PHP
详解PHP匿名函数与注意事项
2016/03/29 PHP
php英文单词统计器
2016/06/23 PHP
PHP调用Mailgun发送邮件的方法
2017/05/04 PHP
设定php简写功能的方法
2019/11/28 PHP
用js实现下载远程文件并保存在本地的脚本
2008/05/06 Javascript
用jquery实现输入框获取焦点消失文字
2013/04/27 Javascript
Jqgrid设置全选(选择)及获取选择行的值示例代码
2013/12/28 Javascript
返回上一页并自动刷新的JavaScript代码
2014/02/19 Javascript
js事件监听器用法实例详解
2015/06/01 Javascript
jquery.gridrotator实现响应式图片展示画廊效果
2015/06/23 Javascript
JSON与String互转的实现方法(Javascript)
2016/09/27 Javascript
原生JS实现《别踩白块》游戏(兼容IE)
2017/02/20 Javascript
JavaScript实现的数字与字符串转换功能示例
2017/08/23 Javascript
基于vue监听滚动事件实现锚点链接平滑滚动的方法
2018/01/17 Javascript
[04:49]2014DOTA2国际邀请赛 Newbee顺利挺进总决赛 ImbaTV独家专访
2014/07/19 DOTA
[36:33]完美世界DOTA2联赛循环赛 Matador vs Forest 第一场 11.06
2020/11/06 DOTA
python模块restful使用方法实例
2013/12/10 Python
从零学Python之入门(三)序列
2014/05/25 Python
Python字符串处理的8招秘籍(小结)
2019/08/13 Python
Python倒排索引之查找包含某主题或单词的文件
2019/11/13 Python
Python Tkinter模块 GUI 可视化实例
2019/11/20 Python
selenium中get_cookies()和add_cookie()的用法详解
2020/01/06 Python
Python模块future用法原理详解
2020/01/20 Python
一文详述 Python 中的 property 语法
2020/09/01 Python
python如何调用php文件中的函数详解
2020/12/29 Python
Python爬虫之Selenium库的使用方法
2021/01/03 Python
CSS3实现点击放大的动画实例代码
2017/02/27 HTML / CSS
怀旧收藏品和经典纪念品:Betty’s Attic
2018/08/29 全球购物
应聘编辑职位自荐信范文
2014/01/05 职场文书
小组组名及励志口号
2015/12/24 职场文书
springboot中一些比较常用的注解总结
2021/06/11 Java/Android
python解析照片拍摄时间进行图片整理
2022/07/23 Python