Vue keepAlive 数据缓存工具实现返回上一个页面浏览的位置
作者:采蘑菇的小姑娘 时间:2024-04-30 10:28:47
需求分析
背景:
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 数据缓存工具实现返回上一个页面浏览的位置,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!
来源:https://segmentfault.com/a/1190000019134375
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
python中实现数组和列表读取一列的方法
使用Python中OpenCV和深度学习进行全面嵌套边缘检测
![](https://img.aspxhome.com/file/2023/0/67420_0s.jpg)
Python pip 安装与使用(安装、更新、删除)
python实现大量图片重命名
Script 元素 type 属性的妙用
python 如何将office文件转换为PDF
Django MTV和MVC的区别详解
![](https://img.aspxhome.com/file/2023/0/75140_0s.png)
Python OpenCV超详细讲解调整大小与图像操作的实现
![](https://img.aspxhome.com/file/2023/2/105582_0s.png)
在Python程序中进行文件读取和写入操作的教程
使用WingPro 7 设置Python路径的方法
![](https://img.aspxhome.com/file/2023/5/69005_0s.jpg)
Python命令行定时任务自动化工作流程
![](https://img.aspxhome.com/file/2023/0/99690_0s.png)
一文带你搞懂PHP单例模式
举例讲解Python中metaclass元类的创建与使用
![](https://img.aspxhome.com/file/2023/8/131148_0s.png)
Python 将代码转换为可执行文件脱离python环境运行(步骤详解)
![](https://img.aspxhome.com/file/2023/6/93706_0s.png)
Win7 x64 IIS运行ASP+Access故障完美解决方法(转)
用 Schema 约束 XML 数据
![](https://img.aspxhome.com/file/UploadPic/20108/24/20100814231755976-28s.gif)
ASP教程:制作登陆验证页面程序
windows无法启动MySQL服务报错1067的解决方法
![](https://img.aspxhome.com/file/2023/0/115290_0s.jpg)
基于Python Dash库制作酷炫的可视化大屏
![](https://img.aspxhome.com/file/2023/5/117905_0s.jpg)
使用Python中Tkinter模块的Treeview 组件显示ini文件操作
![](https://img.aspxhome.com/file/2023/4/135084_0s.png)