需求背景：
项目主流程缓存优化，主流程页面（组件）切换时保持之前加载的状态，避免反复渲染影响页面性能，同时也可以很大程度上减少接口请求，减小服务器压力。
主要知识点：
vue动态组件中keepAlive中的使用，路由全局守卫，keepAlive组件量身定制的钩子。
设计思路
原先这个优化需求是给到我这边，网上查了一些资料，考虑到很多公用组件，最终确定要达到的效果：主流程页面前进刷新，后退时使用keepAlive缓存。花了很多时间和精力，踩了很多坑，最终做出来的效果并不能达到预期。最近公司大佬完成了这个优化需求，看完发现，自己最初的思路就错了。。。。。
切入正题
我直接说大佬的实现方法吧。
一、首页在router文件需要缓存的组件路由元（即meta）中加入keepAlive的键值对如图：
keepAlive路由元.png
router中的路由元是非常好用的东西，它里面定义的属性可以在全局守卫，对应的组件，app.js，公用js等中都能轻松取到，简单实用。and i like it. very much . you konw.......
二、在App.js中用keepAlive标签包住“动态路由视图容器”（名字我瞎起的）即router-view标签，注意不用缓存的组件不需要包：App.js中的处理.png
三、对于简单的项目，这样处理就够了，但是如果有些复杂的项目，例如会使用一些公用组件的情况下，还需要补充一些逻辑。简单说下我们项目的主流程，首页、分类页、产品详情页以及投保页。其中除了首页，其他全是公用组件，根据路由后面的query区分加载。大佬的思路清晰简单，但是十分合理。只考虑一种情况，组件切换时，例如到产品详情页，与最近一次到达产品详情页对比，如果是相同的产品则使用上一次的缓存，如果不是那就重新加载页面，那么问题来了（以下逻辑均在路由文件全局守卫中处理）：
Q 1:我怎么知道最近一次产品详情页呢？
A 1:进入组件时，将该组件的fullpath存到该组件的路由元中（做个标记），这个在路由全局守卫中可以轻易做到：标记组件.png
下次进来拿它路由元中的lastHistoryFullPath就知道最近一次进来的是哪个产品详情页了。
Q2：如何对比这次进来的产品详情页与最近一次的产品详情页呢？
A3 : 不想写了，直接贴代码看吧。
A2 : 前面存下来的fullpath就可以区分，它包含了组件及后面的参数。
Q3：如果第二次进入产品详情页不是最近一次进来时相同的产品，如何处理？
路由全局守卫js.png
App路由监听js.png
最后补充一个坑：
有一个页面的keepAlive始终不生效，最后也是踩了狗屎才能发现这个坑，原因就是这个组件在router文件中的配置name和组件实例中的name不一致。。。。。全局守卫中拿到的to或from的name是从router中对应的路由对象中拿的，而App.js 中的keepAlive标签中的exclude是对比的组件实例中的name,这样说来include应该也是这样。（原因是我猜的，信不信由你）。
