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

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

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

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

Vue 全站缓存之 keep-alive : 动态移除缓存_第2张图片
上图是 demo 项目中的真实效果,目前常见的 vue 开发方案里,一般都会引入 vuex 或 loc

你可能感兴趣的:(Vue,Vue,全站缓存之,keep-alive,:,动态移除缓存)