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

文章标题：VuekeepAlive数据缓存工具实现返回上一个页面浏览的位置-创新互联
当前URL：http://shouzuofang.com/article/cojgoe.html