Vue使用keep-alive实现详情页进入列表页缓存,其他页面进入列表页不缓存

场景:为了优化用户体验,当从商品详情页返回到商品列表页时,不需要再次请求商品列表数据。由此,我想到了使用Vue中的keep-alive,但常规keep-alive的使用方法仅满足任…

场景:为了优化用户体验,当从商品详情页返回到商品列表页时,不需要再次请求商品列表数据。由此,我想到了使用Vue中的keep-alive,但常规keep-alive的使用方法仅满足任何条件下都缓存单个页面。

但在实际过程中,我们从其他页面(如商品分类页)进入商品列表页时,应当是请求商品列表的数据,不再缓存该页面。这里,如果使用keep-alive的常规方法则无法满足需求,所以有了以下的解决方案。

1. 配置路由出口渲染组件

App.vue文件进行以下配置

2. 在路由选项中,配置meta属性和isBack标识

在路由文件中,配置meta属性keepAlivetrue时,表示缓存该页面;同时,配置isBack标识,进行判断是否从详情页返回该页面。

3. 在缓存的Vue文件中做判断

在需要缓存的列表文件中(如GoodsList.vue),进行以下配置

3.1 判断需要缓存的页面

通过beforeRouteEnter(to, from, next),来判断路由是从哪里来跳转的,如果是从详情页跳转的,则将当前路由对象的meta.isBack设置为true,否则设为false

3.2 不缓存页面,重新请求数据

其他页面进入缓存页面时,应重新请求数据,所以需要在页面加载之前(即activated),将之前获取到的数据以及查询条件清空。

相关问题:

使用keep-alive缓存时,会出现无法缓存滚动条高度的情况,这里需要在activated中定义滚动条的高度。具体做法如下:(返回记住滚动条的位置)

文档:https://www.cnblogs.com/_error/p/10118257.html

参考资料

https://segmentfault.com/a/1190000017456786?utm_source=tag-newest

https://yq.aliyun.com/articles/608977

如果您喜欢本站分享的资源,点击这儿捐赠我们

这些信息可能会帮助到你: 外卖赚钱 | 进站必看

原创文章,作者:宋小羽,如若转载,请注明出处:https://res.bysjb.cn/vue-keep-alive.html