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 相关文章推荐
让你的CSS像Jquery一样做筛选的实现方法
Jul 10 Javascript
详解强大的jQuery选择器之基本选择器、层次选择器
Feb 07 Javascript
js如何实现设计模式中的模板方法
Jul 23 Javascript
判断滚动条到底部的JS代码
Nov 04 Javascript
鼠标经过tr时,改变tr当前背景颜色
Jan 13 Javascript
jquery仿QQ登录账号选择下拉框效果
Mar 22 Javascript
JavaScript判断浏览器及其版本信息
Jan 20 Javascript
angularJs的ng-class切换class
Jun 23 Javascript
详解Vue2.0配置mint-ui踩过的那些坑
Apr 23 Javascript
JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例
May 31 jQuery
JS正则表达式验证密码强度
Mar 18 Javascript
jQuery实现简单评论功能
Aug 19 jQuery
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
教你如何把一篇文章按要求分段
2006/10/09 PHP
台湾中原大学php教程孙仲岳主讲
2008/01/07 PHP
PHP实现的DES加密解密封装类完整实例
2017/04/29 PHP
判断iframe是否加载完成的完美方法
2010/01/07 Javascript
js 返回时间戳所对应的具体时间
2010/07/20 Javascript
Jquery读取URL参数小例子
2013/08/30 Javascript
JS禁用浏览器退格键实现思路及代码
2013/10/29 Javascript
jquery scroll()区分横向纵向滚动条的方法
2014/04/04 Javascript
JavaScript获取浏览器信息的方法
2015/11/20 Javascript
Vue.JS入门教程之列表渲染
2016/12/01 Javascript
react实现pure render时bind(this)隐患需注意!
2017/03/09 Javascript
详解bootstrap-fileinput文件上传控件的亲身实践
2019/03/21 Javascript
详细讲解如何创建, 发布自己的 Vue UI 组件库
2019/05/29 Javascript
微信小程序8种数据通信的方式小结
2020/02/03 Javascript
js 函数性能比较方法
2020/08/24 Javascript
用Python的urllib库提交WEB表单
2009/02/24 Python
简单说明Python中的装饰器的用法
2015/04/24 Python
一个基于flask的web应用诞生 用户注册功能开发(5)
2017/04/11 Python
python实现换位加密算法的示例
2018/10/14 Python
Python何时应该使用Lambda函数
2019/07/02 Python
elasticsearch python 查询的两种方法
2019/08/04 Python
python使用配置文件过程详解
2019/12/28 Python
python 实现人和电脑猜拳的示例代码
2020/03/02 Python
python多线程semaphore实现线程数控制的示例
2020/08/10 Python
Scrapy中如何向Spider传入参数的方法实现
2020/09/28 Python
python 实现端口扫描工具
2020/12/18 Python
html5 input属性使用示例
2013/06/28 HTML / CSS
CAT鞋加拿大官网:CAT Footwear加拿大
2020/08/05 全球购物
大三在校生电子商务求职信
2013/10/29 职场文书
金融管理毕业生求职信
2014/03/03 职场文书
助残日活动总结
2014/08/27 职场文书
机关作风建设自查报告及整改措施
2014/10/21 职场文书
大雁塔导游词
2015/02/04 职场文书
幼儿园圣诞节活动总结
2015/05/06 职场文书
详解NodeJS模块化
2021/06/15 NodeJs
Python 全局空间和局部空间
2022/04/06 Python