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 数据缓存工具实现返回上一个页面浏览的位置，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

来源：https://segmentfault.com/a/1190000019134375