vuex + keep-alive实现tab标签页面缓存功能

实现上面的功能，采用 vuex 进行全局的缓存数据保存，定义为 cacheView ;已经打开的路由页面用 toolBarData 进行保存。下图是代码是代码设计整体图:需要添加一个路由页面到 cacheView ，需要有 actions setCacheView 来 commit 一个 change Event 对 state 数据进行更改，然后修改后的数据会自动派发到 App.vue 中使用到该数据的位置（即 keep-alivenamestore 代码实现如下所示，主要需要比较详细说明的是 clearToolItem ,这个函数是清除标签页。入口文件缓存路由在 App.vue 入口文件，使用 keep-alive 对匹配的路由组件进行缓存，监听当前路由变化，添加缓存路由和标签。click 主要是当对该标签项点击操作，则切换到该路由页面。vue 为我们提供了 activated 和 deactivated 生命周期函数，当重新进入路由组件会触发 activated 函数，离开则会触发 deactivated 。