Vue keepAlive 数据缓存工具实现返回上一个页面浏览的位置


Posted in Javascript onMay 10, 2019

需求分析

背景:

1.数据列表页,滚动加载数据;

2.多条数据情况下,点击某一条,进入详细页进行编辑(修改,删除)操作;

3.保存返回上一页;

在上面的情况下,想要保持在上次浏览位置,并且保持数据是最新的;

解决办法

1.原始的办法:在点击详情页的时候,记住浏览位置,传递参数或者存到本地缓存,然后在详情页操作完毕后,返回的时候,路由守卫可以判断,是否详情页跳转回来的,然后让页面滚动到上次记录的位置;

思路是这样,实际操作很麻烦;

2.推荐办法:使用vue动态组件keep-alive,搭配路由守卫函数beforeRouteLeave,以及activated钩子函数;

对于钩子函数执行顺序,以及作用详细说明,请参考vue组件的生命周期

步骤详解

我的步骤是按照开发思路进行的,场景就是从商品列表页——>商品详细页——>商品列表(数据缓存);

开发之前看到网上好多人都是在路由文件里面配置

meta:{keepAlive:true}

但我觉得没有必要,因为列表页不是一直需要缓存数据的,假如从首页进入,则不需要,所以就在路由守卫函数中判断是否需要缓存数据即可;

以下代码,使用list.vue代表列表页;detail.vue代表详细页;

场景1:点击返回,判断路由跳转的是否是需要缓存的列表页:

detail.vue

beforeRouteLeave (to, from, next) {
 if (to.name === 'M2mBoard') {
 to.meta.keepAlive = true
 }
 next()
 }

由于keepAlive是vue2.0中内置组件,所以设置页面路由meta.keepAlive = true即可缓存数据,路由跳转是利用函数this.$router.go(-1);就可以显示在上次浏览的记录位置;

场景2:编辑详细页数据,回到列表页,则需要将修改的数据保存到本地,然后在列表页的缓存数据中,更改显示即可:

detail.vue

beforeRouteLeave (to, from, next) {
 if (to.name === 'M2mBoard') {
 to.meta.keepAlive = true
 }
 if (this.isChange) {
 let changeData = {
 inquiryNo: this.inquiry.inquiryNo,
 inquiryTitle: this.inquiry.inquiryTitle
 }
 window.sessionStorage.setItem('changeData', JSON.stringify(changeData))
 }
 to.meta.isChange = this.isChange
 next()
 }

列表页中判断一下,是否需要修改数据:

list.vue

activated () {
 if (this.$route.meta.isChange) {
 let changeData = JSON.parse(window.sessionStorage.getItem('changeData'))
 this.list.forEach(item => {
 if (item.inquiryNo === changeData.inquiryNo) {
  item.inquiryTitle = changeData.inquiryTitle
 }
 })
 }
 }

activated 钩子函数,在keep-alive组件激活时自动执行,判断如果需要修改,从本地取出数据,循环列表数据,找出需要修改的那一条,进行显示数据的修改(因为是临时修改,所以只修改显示的参数即可);

场景3:在详细页点击删除该条数据

detail.vue

beforeRouteLeave (to, from, next) {
 if (to.name === 'M2mBoard' && !this.idDel) {
 to.meta.keepAlive = true
 }
 next()
 }

删除操作,可以排除后直接不用缓存,或者跟修改一样的操作,判断是删除,临时删除,列表中缓存的数据也可以;

上面3种情况通常会同时出现,所以最后的写法就是:

detail.vue

beforeRouteLeave (to, from, next) {
 if (to.name === 'M2mBoard' && !this.idDel) {
 to.meta.keepAlive = true
 }
 if (this.isChange) {
 let changeData = {
 inquiryNo: this.inquiry.inquiryNo,
 inquiryTitle: this.inquiry.inquiryTitle
 }
 window.sessionStorage.setItem('changeData', JSON.stringify(changeData))
 }
 to.meta.isChange = this.isChange
 next()
 }

list.vue

beforeRouteLeave (to, from, next) {
 from.meta.keepAlive = false
 next()
 },
 activated () {
 if (this.$route.meta.isChange) {
 let changeData = JSON.parse(window.sessionStorage.getItem('changeData'))
 this.list.forEach(item => {
 if (item.inquiryNo === changeData.inquiryNo) {
  item.inquiryTitle = changeData.inquiryTitle
 }
 })
 }
 }

列表页种路由跳转的时候需要进行meta.keepAlive = false操作,防止出现,从detail.vue跳转回来后,list.vue在与其他页面进行路由跳转的时候,始终处于缓存状态,数据不更新现象;

注意:在info.vue跳转list.vue的路由活动最好使用this.$router.go(-1),不然回到list.vue页面,数据缓存了,但是页面位置不会是上次访问的位置;具体原因还在研究,哈哈哈...

ok,上面就是在项目开发使用中用到的keep-alive的整个思路;记录一下,以免忘记,还有欢迎参考与指正。

以上所述是小编给大家介绍的Vue keepAlive 数据缓存工具实现返回上一个页面浏览的位置,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
用JavaScript玩转游戏物理(一)运动学模拟与粒子系统
Jun 19 Javascript
jQuery :first选择器使用介绍
Aug 09 Javascript
解决js中window.open弹出的是上次的缓存页面问题
Dec 29 Javascript
jQuery仿360导航页图标拖动排序效果代码分享
Aug 24 Javascript
Bootstrap每天必学之响应式导航、轮播图
Apr 25 Javascript
解析JavaScript面向对象概念中的Object类型与作用域
May 10 Javascript
plupload+artdialog实现多平台上传文件
Jul 19 Javascript
p5.js入门教程之平滑过渡(Easing)
Mar 16 Javascript
vue中使用rem布局代码详解
Oct 30 Javascript
vue 中固定导航栏的实例代码
Nov 01 Javascript
Vue解决echart在element的tab切换时显示不正确问题
Aug 03 Javascript
vue路由结构可设一层方便动态添加路由操作
Aug 31 Javascript
vue无限轮播插件代码实例
May 10 #Javascript
js中的深浅拷贝问题简析
May 10 #Javascript
解决cordova+vue 项目打包成APK应用遇到的问题
May 10 #Javascript
详解jQuery如何实现模糊搜索
May 10 #jQuery
JS匿名函数内部this指向问题详析
May 10 #Javascript
详解关于React-Router4.0跳转不置顶解决方案
May 10 #Javascript
Vue使用watch监听一个对象中的属性的实现方法
May 10 #Javascript
You might like
php 检查电子邮件函数(自写)
2014/01/16 PHP
使用php语句将数据库*.sql文件导入数据库
2014/05/05 PHP
php判断用户是否手机访问代码
2015/06/08 PHP
基于ThinkPHP+uploadify+upload+PHPExcel 无刷新导入数据
2015/09/23 PHP
Session 失效的原因汇总及解决丢失办法
2015/09/30 PHP
由prototype_1.3.1进入javascript殿堂-类的初探
2006/11/06 Javascript
一个页面元素appendchild追加到另一个页面元素的问题
2013/01/27 Javascript
JS中如何设置readOnly的值
2013/12/25 Javascript
js获取select标签选中值的两种方式
2014/01/09 Javascript
AngularJS入门教程(一):静态模板
2014/12/06 Javascript
Javascript闭包用法实例分析
2015/01/23 Javascript
jQuery子属性过滤选择器用法分析
2015/02/10 Javascript
JavaScript无缝滚动效果的实例代码
2017/03/27 Javascript
基于node.js实现微信支付退款功能
2017/12/19 Javascript
简述vue-cli中chainWebpack的使用方法
2019/07/30 Javascript
ligerUI的ligerDialog关闭刷新的方法
2019/09/27 Javascript
JS实现放大镜效果
2020/09/21 Javascript
详解JavaScript执行模型
2020/11/16 Javascript
深入解析Python中的urllib2模块
2015/11/13 Python
Python实现获取磁盘剩余空间的2种方法
2017/06/07 Python
Python建立Map写Excel表实例解析
2018/01/17 Python
python测试mysql写入性能完整实例
2018/01/18 Python
将python安装信息加入注册表的示例
2019/11/20 Python
Django后端发送小程序微信模板消息示例(服务通知)
2019/12/17 Python
python3 使用traceback定位异常实例
2020/03/09 Python
Python 实现劳拉游戏的实例代码(四连环、重力四子棋)
2021/03/03 Python
CSS3使用border-radius属性制作圆角
2014/12/22 HTML / CSS
使用HTML5的链接预取功能(link prefetching)给网站提速
2012/12/13 HTML / CSS
英国马莎百货官网:Marks & Spencer
2016/07/29 全球购物
建筑工程专业学生的自我评价
2013/12/25 职场文书
药品促销活动方案
2014/02/14 职场文书
十八大演讲稿
2014/05/22 职场文书
承诺书格式
2014/06/03 职场文书
2014年重阳节老干部座谈会局领导发言稿
2014/09/25 职场文书
初中差生评语
2014/12/29 职场文书
病人家属写给医院的感谢信
2015/01/23 职场文书