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

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

以一个记账项目举例，常见的场景有首页、记到账页面、选择合同、新建合同、选择客户、新建客户这些页面。

在这些页面中，很显然，用户的浏览行为应该是逐渐深入的，通俗得讲就是浏览页面在不断前进。
而且这些页面之间还是有互动性存在的，两种互动行为：

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

上图是 demo 项目中的真实效果，目前常见的 vue 开发方案里，一般都会引入 vuex 或 localStorage ，在各个页面不断的存储和调用页面内的数据，我觉得，这很不科学很不优雅。

keep-alive 什么问题
vue 支持 keep-alive 组件，如果启用，页面内的所有数据都会被保留，所以，上文的互动行为二后退时保留前一页数据继续操作没有问题。
问题出在互动行为一用户前进时总是进入新页面，然而一旦缓存，你就没法总是进新页面了，你总是进入缓存页，这就很让人头疼了。
官方提供了include和exclude特性，说你