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 相关文章推荐
基于jquery的仿百度的鼠标移入图片抖动效果
Sep 17 Javascript
javascript实现div浮动在网页最顶上并带关闭按钮效果实例
Aug 13 Javascript
用js的for循环获取radio选中的值
Oct 21 Javascript
Js中使用hasOwnProperty方法检索ajax响应对象的例子
Dec 08 Javascript
jquery实现textarea输入框限制字数的方法
Jan 15 Javascript
JS中innerHTML和pasteHTML的区别实例分析
Jun 22 Javascript
CodeMirror js代码加亮使用总结
Mar 25 Javascript
node.js操作mongodb简单示例分享
May 25 Javascript
Angular客户端请求Rest服务跨域问题的解决方法
Sep 19 Javascript
Vue项目History模式404问题解决方法
Oct 31 Javascript
在vue里使用codemirror遇到的问题
Nov 01 Javascript
如何优雅的在一台vps(云主机)上面部署vue+mongodb+express项目
Jan 20 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
解决MySQL中文输出变成问号的问题
2008/06/05 PHP
PHP类与对象中的private访问控制的疑问
2012/11/01 PHP
使用session判断用户登录用户权限(超简单)
2013/06/08 PHP
php实现分页工具类分享
2014/01/09 PHP
php魔法函数与魔法常量使用介绍
2017/07/23 PHP
PHP 7安装使用体验之性能大提升,兼容性强,扩展支持不够(升级PHP要谨慎)
2017/07/27 PHP
PHP的图像处理实例小结【文字水印、图片水印、压缩图像等】
2019/12/20 PHP
Array.prototype.slice.apply的使用方法
2010/03/17 Javascript
js本身的局限性 别让javascript做太多事
2010/03/23 Javascript
js、jquery图片动画、动态切换示例代码
2014/06/03 Javascript
jquery判断至少有一个checkbox被选中的方法
2015/06/05 Javascript
javascript文本模板用法实例
2015/07/31 Javascript
angular 基于ng-messages的表单验证实例
2017/05/04 Javascript
vue移动端下拉刷新和上拉加载的实现代码
2018/09/08 Javascript
vux-scroller实现移动端上拉加载功能过程解析
2019/10/08 Javascript
ES6实现图片切换特效代码
2020/01/14 Javascript
Python的Flask框架中使用Flask-Migrate扩展迁移数据库的教程
2016/06/14 Python
python 构造三维全零数组的方法
2018/11/12 Python
如何使用Python多线程测试并发漏洞
2019/12/18 Python
简单了解Python读取大文件代码实例
2019/12/18 Python
jupyter 中文乱码设置编码格式 避免控制台输出的解决
2020/04/20 Python
解决python打开https出现certificate verify failed的问题
2020/09/03 Python
Python xlwings插入Excel图片的实现方法
2021/02/26 Python
利用HTML5 Canvas制作键盘及鼠标动画的实例分享
2016/03/15 HTML / CSS
Spartoo美国:欧洲排名第一的在线时装零售商
2019/12/12 全球购物
大学毕业生的自我鉴定
2013/11/30 职场文书
大学生文员专业个人求职信范文
2014/01/05 职场文书
公积金转移接收函
2014/01/11 职场文书
摄影展策划方案
2014/06/02 职场文书
护理专业求职信
2014/06/15 职场文书
篮球兴趣小组活动总结
2014/07/07 职场文书
人口与计划生育目标管理责任书
2014/07/29 职场文书
2015年六一儿童节演讲稿
2015/03/19 职场文书
酒店办公室主任岗位职责
2015/04/01 职场文书
领导干部学习三严三实心得体会
2016/01/05 职场文书
Redis入门教程详解
2021/08/30 Redis