Vue 全站缓存之 keep-alive : 动态移除缓存

本文探讨了在Vue应用中使用keep-alive进行全站缓存时遇到的问题,即如何动态移除不需要的缓存页面。通过分析源码和组件状态,作者提出了一种直接操作keep-alive的cache属性来暴力移除缓存的解决方案,解决了不能动态控制缓存的问题。
摘要由CSDN通过智能技术生成

阅读本文之前,默认大家对 vue 和 keep-alive 都很熟悉,所以不再啰嗦相关资料,直接进入正文
有耐心的话,且听我细细道来,如果你遇到过类似问题,或正在寻找解决方案,那么你可以直接翻到文末看结论。

以一个记账项目举例,常见的场景有首页、记到账页面、选择合同、新建合同、选择客户、新建客户这些页面。
在这里插入图片描述
在这些页面中,很显然,用户的浏览行为应该是逐渐深入的,通俗得讲就是浏览页面在不断前进。
而且这些页面之间还是有互动性存在的,两种互动行为:

一. 用户前进时,总是进入新的页面。(比如在合同列表页反复加载多次列表之后,进入其中一个合同详情,再返回时,应该仍停留之前里列表页同一个位置,而不是重新刷新列表页。)
二. 用户后退时,需要能保留前一页数据并继续操作。(比如,记到账时需要选择合同,选择合同时可以新建合同,新建合同时填了一堆数据可以去选择客户,在选择客户时又去创建了客户,那么这一堆操作下来应该能够做到:创建完客户后继续新建合同,建完合同后继续记该合同的到账)

在这里插入图片描述
上图是 demo 项目中的真实效果,目前常见的 vue 开发方案里,一般都会引入 vuex 或 loc

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值