VuekeepAlive数据缓存工具实现返回上一个页面浏览的位置-创新互联

需求分析

背景：

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()
 }