这是我参与8月更文挑战的第4天，活动详情查看：8月更文挑战
vue多页面缓存的实现
众所周知，vue是单页面的路由，我们一般页面缓存的时候使用
keep-alive来包裹route-view,这样就可以实现缓存数据。
前言
缓存模式
<keep-alive>
<router-view></router-view>
</keep-alive>
只在进入当前路由的第一次render，来回切换不会重新执行生命周期，并且能缓存router-view的数据。
router-view 数据缓存问题
keep-alive采用render函数来创建Vnode，在render是获取到Vnode，若 cache[key] 存在，则:
vnode.componentInstance = cache[key].componentInstance
否则，将Vnode保存在cache里：
cache[key] = vnode
正文
一、左侧菜单，打开的页面tab(红色框)，页面内容窗口显示部分(绿色框)
二、在项目根实例定义属性指向项目最新keep-alive数据
说明：以上代码已经实现了把项目的keepalive数据存储到vue实例中去，在关闭页面时，清除对应数据即可；
三、页面关闭处理，代码如下：
说明：点击关闭tab，调用close事件，close再去删除打开的tab数据，然后再去删除页面keepalive数据（clearVmNode函数）；
clearVmNode函数，根据要关闭得tab数据中的路径去找到对应keepalive数据中对应页面的虚拟dom缓存数据，然后去删除；
四、实现vue动态路由页面想要根据地址栏来进行对应页面数据缓存
说明：如上如果不加处理，那么keepalive页面数据缓存就是只存一份，id是63和65时候的页面虚拟dom数据只存了一份，而这里就需要存两份，实现代码如下：(左侧为更改前，右侧为更改后)
说明：源码中使用的是name作为存储虚拟dom数据的标识，这个name就是.vue中的name属性，所以为造成动态路由只存了一份缓存数据，我们只需要用页面path做这个存储页面数据的唯一标识即可；
至此就是利用keep-alive实现多页面缓存的全部代码了，谢谢观看！温故而知新！
