前言：

在开发很多管理系统过程之中，常遇到这种需求，需要对打开路由页面进行缓存，然后在系统页眉提供方便查阅的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。