扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
需求分析
背景：
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()
}
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
微信二维码
移动版官网