写在前面
一个web app的实际使用场景中，有一些情景的交互要求，是记录用户的浏览状态的。最常见的就是在列表页进入详情页之后，再返回到列表页，用户希望返回到进入详情页之前的状态继续操作。但是有些使用场景，用户又是希望能够获取最新的数据，例如同级列表页之间切换的时候。
如此，针对上述两种使用场景，需要实现按需读取页面缓存。由于SPA应用的路由逻辑也是在前端实现的，因此可以在前端对路由的逻辑进行设置以实现所需效果。
使用技术
Vue.js作为主要框架
Vue-router作为前端路由管理器
Vuex作为状态管理工具
总体思路
keep-alive判断当前组件是否读取缓存的节点，在整个生命周期里面非常靠后，在afterEach之后，基本在组件实例创建之前。（因此在此之前对当前组件是否读取缓存进行处理都是可行的，我选择在全局前置守卫进行处理）
而判断当前组件是否缓存的节点，则早于组件的beforeRouteLeave钩子。
基于上述逻辑，本方案解决的逻辑是，对当前打开的页面进行判断，动态生成需要keepAlive的组件数组配置，对有可能需要缓存的先行进行缓存，然后在每次路由切换的时候，再进行判断，按需读取页面缓存。
使用kepp-alive进行缓存，使用include属性对需要缓存的页面进行配置。
由于需要缓存的页面配置系动态生成，所以使用vuex储存该配置。
在路由元信息中写入两个配置，一是该路由是否需要缓存，二是从相关路由进入时才进行缓存的特定路由数组。
在beforeEach进行设置，每次进入路由之前，对进入的路由及其所有父级路由进行判断，若需要缓存且命中特定路由数组，则将相关路由添加至缓存配置文件中；若不符合，则将相关路由删除。（此步骤实现了路由切换时，需要则读取缓存，不需要则重新获取数据。）
使用全局mixin，进入相关组件之前，对当前路由进行判断，如果需要缓存的则将该路由添加至缓存配置中。（此步骤实现了缓存当前打开的需要缓存的页面。）
具体实现
1. 使用include属性控制路由缓存
此处需要注意的是，include匹配首先检查组件自身的 name 选项，如果 name 选项不可用，则匹配它的局部注册名称 (父组件 components 选项的键值)。匿名组件不能被匹配。
但是vue-router的环境下，是没有局部注册名称的，只能为组件补全name属性。
因此，请务必给组件添加 name 选项，否则匿名组件将全部应用缓存。
<keep-alive :include="$store.state.cachedRouteNames">
<router-view />
</keep-alive>
