vue keep-alive 列表到详情页面保留缓存,菜单切换时不保留缓存更新列表数据

本文讲述了如何在Vue应用中利用keep-alive进行列表页面与详情页面的缓存管理,包括设置路由元数据、判断缓存状态、清除条件刷新以及处理详情页面的交互操作。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

当某个列表页面进行名称分页等查询进入详情页面之后,从详情页面返回到列表页时我们想保留之前查询过得条件。这时候我们就可以使用keep-alive进行缓存。

1.首先我们需要在路由的meta内定义KeepAlive来设置需要被缓存的页面。

tips:  这里是router的静态路由写法,如果是动态路由从接口添加的路由的话可以在页面加个参数或者直接拿到返回的router数组进行递归处理,统一加 KeepAlive参数。红圈部分是需要缓存的列表,如果有多个可以写个数组进行判断。

 

 2.在页面中判断是否需要缓存

tips: 这里keep-alive有个bug 就是第二次进入缓存的页面的时候 会出现第一次缓存的数据。所以我们这里使用isRouterAlive变量,通过 isRouterAlive 控制 router-view 达到刷新效果,控制刷新keep-alive。这里使用provide,inject 来达到刷新效果。

 3.在列表页面,进行当前页面数据的缓存,进入当前页面的时候其他页面不需要缓存,所以需要使用inject: ['reload'],来进行清空条件刷新

 在列表页面进入详情页面时 需要缓存列表页的数据,所以keepalive设置为true,其他页面则进行数据刷新

 从其他页面进入列表页面时不需要缓存数据,其他页面keepalice设置为false

 5.我这里详情页面只是进行数据展示,没有添加或者修改的操作。如果详情页面有添加或者修改的操作回到列表页需要进行数据刷新时,可以使用activated周期 判断meta.keepAlive 然后调用列表接口

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值