基于vue的keepalive实现路由缓存

　　前言：
　　在开发很多管理系统过程之中，常遇到这种需求，需要对打开路由页面进行缓存，然后在系统页眉提供方便查阅的tab标签进行切换以及对已经缓存页面进行数据刷新和清除数据操作。具体演示如下图所示：
　　在上面演示中实现了类似window tab标签页效果，会对当前数据进行缓存。在浏览器中实现对路由页面的缓存可以减少接口请求，也方便了用户来回切换想搜索的数据列表。原理:
　　Vue提供的keep-alive API实现对路由组件的缓存。include属性可以绑定一个数组，里面是需要路由组件的path值，可以实现对该路由组件进行缓存，如果不需要对路由进行缓存，直接移除该项元素即可。
　　官网文档链接： https://v2.cn.vuejs.org/v2/guide/components-dynamic-async.html#%E5%9C%A8%E5%8A%A8%E6%80%81%E7%BB%84%E4%BB%B6%E4%B8%8A%E4%BD%BF%E7%94%A8-keep-alive
　　1.创建TopBar.vue 组件并导入到父组件中    2.vuex 中存储 目前缓存的路由列表import Vue from ＂vue＂ import Vuex from ＂vuex＂ import router from ＂@/router＂ Vue.use(Vuex)  const store = new Vuex.Store({     //存数据的仓库     state: {         cacheViews: []     },     //修改仓库中数据的同步方法     mutations: {         addCacheView(state, view) {             let index = state.cacheViews.findIndex(item => item.path == view.path)             let { path, meta } = view;             //如果在数组中找不到当前路由就添加到该数组中             if (index == -1) {                 state.cacheViews.push({ path, meta })                 // 添加之后超过10个子路由需要删除第0个                 if(state.cacheViews.length >10){                     state.cacheViews.pop()                 }             }         },         delCacheView(state, index) {             //如果删除清空了整个数组就切换页面路由到首页             if (state.cacheViews.length == 1) {                 state.cacheViews.splice(index, 1);                 router.push(＂/home＂)             } else if (state.cacheViews.length - 1 == index) {                 //如果删除的是最后一个，需要切换路由到删除之后的最后一个                 state.cacheViews.splice(index, 1);                 router.push(state.cacheViews[state.cacheViews.length - 1])             } else {                 //否则，直接进行删除                 state.cacheViews.splice(index, 1);             }         }     },     //调用 同步方法 实现异步修改仓库中的数据     actions: {      } })  export default store;3.在路由上 加上切换动画组件 与 keepp-alive缓存路由
　　includes 属性 为当前缓存的路由列表                                                                import {mapState} from ＂vuex＂  computed:{     ...mapState[＂cacheViews＂]   }4.生命周期activated和deactivated
　　采用了keep-alive缓存的路由组件，重新进入该路由，路由组件不会重新创建，所以也就不会触发组件的生命周期函数（比如说beforeCreate、mounted等）。所以在对该页面进行数据更新或者清除数据。vue为我们提供了activated和deactivated生命周期函数，当重新进入路由组件会触发activated函数，离开则会触发deactivated。