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表格的渲染组件
Jul 03 Javascript
Jquery Ajax Error 调试错误的技巧
Nov 20 Javascript
深入浅析JavaScript中的3DES
Aug 24 Javascript
第一次动手实现bootstrap table分页效果
Sep 22 Javascript
js实现下拉菜单效果
Mar 01 Javascript
vue-router动态设置页面title的实例讲解
Aug 30 Javascript
arctext.js实现文字平滑弯曲弧形效果的插件
May 13 Javascript
浅谈vue限制文本框输入数字的正确姿势
Sep 02 Javascript
node.js中事件触发器events的使用方法实例分析
Nov 23 Javascript
vue-router 2.0 跳转之router.push()用法说明
Aug 12 Javascript
Vuex实现购物车小功能
Aug 17 Javascript
JS继承最简单的理解方式
Mar 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
Bo-Blog专用的给Windows服务器的IIS Rewrite程序
2007/08/26 PHP
PHP 批量删除 sql语句
2009/06/05 PHP
完美解决PHP中的Cannot modify header information 问题
2013/08/12 PHP
使用Zttp简化Guzzle 调用
2017/07/02 PHP
理解Javascript的call、apply
2015/12/16 Javascript
基于BootStarp的Dailog
2016/04/28 Javascript
js简单倒计时实现代码
2016/04/30 Javascript
详解Node.js模块间共享数据库连接的方法
2016/05/24 Javascript
javascript类型系统——undefined和null全面了解
2016/07/13 Javascript
简单的JS控制button颜色随点击更改的实现方法
2017/04/17 Javascript
Angular2 之 路由与导航详细介绍
2017/05/26 Javascript
vue页面加载闪烁问题的解决方法
2018/03/28 Javascript
spirngmvc js传递复杂json参数到controller的实例
2018/03/29 Javascript
jQuery实现的上传图片本地预览效果简单示例
2018/03/29 jQuery
vue实现一个炫酷的日历组件
2018/10/08 Javascript
基于Vue-cli快速搭建项目的完整步骤
2018/11/03 Javascript
vuedraggable+element ui实现页面控件拖拽排序效果
2020/07/29 Javascript
JavaScript类型相关的常用操作总结
2019/02/14 Javascript
VUEX 数据持久化,刷新后重新获取的例子
2019/11/12 Javascript
js事件机制----捕获与冒泡机制实例分析
2020/05/22 Javascript
Postman无法正常返回结果问题解决
2020/08/28 Javascript
python调用机器喇叭发出蜂鸣声(Beep)的方法
2015/03/23 Python
Python网站验证码识别
2016/01/25 Python
一步步解析Python斗牛游戏的概率
2016/02/12 Python
Python 实现还原已撤回的微信消息
2019/06/18 Python
python pytest进阶之fixture详解
2019/06/27 Python
翻转数列python实现,求前n项和,并能输出整个数列的案例
2020/05/03 Python
Python使用os.listdir和os.walk获取文件路径
2020/05/21 Python
日本PLST在线商店:日本时尚杂志刊载的人气服装
2016/12/10 全球购物
化工机械应届生求职信
2013/11/04 职场文书
活动策划求职信模板
2014/04/21 职场文书
党员干部一句话承诺
2014/05/30 职场文书
2015初中政教处工作总结
2015/07/21 职场文书
2016幼儿园教师节新闻稿
2015/11/25 职场文书
写作之关于描写老人的好段摘抄
2019/11/14 职场文书
使用canvas仿Echarts实现金字塔图的实例代码
2021/11/11 HTML / CSS