Vue keepAlive 数据缓存工具实现返回上一个页面浏览的位置
需求分析
背景：
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 数据缓存工具实现返回上一个页面浏览的位置，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！
相关文章
本篇文章主要介绍了详解Vue中添加过渡效果 ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-03-03
动态路由,动态即不是写死的,是可变的,下面这篇文章主要给大家介绍了关于vue实现动态路由的详细代码示例,文中通过图文以及代码介绍的非常详细,需要的朋友可以参考下2024-01-01
这篇文章主要介绍了详解Vite的新体验，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-02-02
在本篇文章里小编给大家整理的是一篇关于Vue中的常用指令及用法总结内容，对此有兴趣的朋友们可以跟着学习下。2022-01-01
本文将介绍几种基于Vue、Element-UI的换肤实现方案，力争通俗易懂，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
当市面上主流的组件库不能满足我们业务需求的时候,那么我们就有必要开发一套属于自己团队的组件库,下面这篇文章主要给大家介绍了一个基于vue3+ts+vite项目搭建的相关资料,需要的朋友可以参考下2022-05-05
这篇文章主要为大家详细介绍了vue使用el-upload实现文件上传,文中示例代码介绍的非常详细,对大家的学习或工作有一定的帮助,感兴趣的小伙伴们可以参考一下2024-01-01
在Vue的开发中,我们经常会用到外部组件库,下面这篇文章主要给大家介绍了关于vue中深度选择器的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-06-06
ref是Vue3中一个非常重要的功能,它可以用来获取DOM节点,从而实现对DOM节点的操作,下面这篇文章主要给大家介绍了关于vue3中获取dom元素和操作实现的相关资料,需要的朋友可以参考下2023-06-06
Unity webgl嵌入到前端网页中,前端通过调用Unity webgl内方法实现需要展示的功能,前端点击Unity webgl内的交互点,Unity webgl返回给前端一些需要的数据,这篇文章主要介绍了Unity webgl 嵌入Vue实现过程,需要的朋友可以参考下2024-01-01
最新评论