阅读本文之前,默认大家对 vue 和 keep-alive 都很熟悉,所以不再啰嗦相关资料,直接进入正文
有耐心的话,且听我细细道来,如果你遇到过类似问题,或正在寻找解决方案,那么你可以直接翻到文末看结论。
以一个记账项目举例,常见的场景有首页、记到账页面、选择合同、新建合同、选择客户、新建客户这些页面。
在这些页面中,很显然,用户的浏览行为应该是逐渐深入的,通俗得讲就是浏览页面在不断前进。
而且这些页面之间还是有互动性存在的,两种互动行为:
一. 用户前进时,总是进入新的页面。(比如在合同列表页反复加载多次列表之后,进入其中一个合同详情,再返回时,应该仍停留之前里列表页同一个位置,而不是重新刷新列表页。)
二. 用户后退时,需要能保留前一页数据并继续操作。(比如,记到账时需要选择合同,选择合同时可以新建合同,新建合同时填了一堆数据可以去选择客户,在选择客户时又去创建了客户,那么这一堆操作下来应该能够做到:创建完客户后继续新建合同,建完合同后继续记该合同的到账)
上图是 demo 项目中的真实效果,目前常见的 vue 开发方案里,一般都会引入 vuex 或 loc