关于Vue+Element 中tab切换启用路由缓存，保留页面查询条件

项目场景：

在elementui 中 顶部 tab栏 切换，不启用路由缓存会直接刷新界面，现在项目需求是当我点击tab切换或者菜单切换的时候，原本的查询状态药保持，这在项目中还是很常见的一种。

---

原理：

Vue 提供的 keep-alive API实现对路由组件的缓存，其中 include 属性可以绑定一个数组，需要路由组件的 name 值，可以实现对该路由组件进行缓存。

---

问题：

提示： include 属性绑定一个数组，数组有打开需要缓存的路由name;

// # layout中
<div class="content">
    <transition name="move" mode="out-in">
         <keep-alive :include="tagsList" v-if="isRouterAlive">
               <router-view></router-view>
         </keep-alive>
    </transition>
</div>



// layout  script中
data(){
  return {
      isRouterAlive:true
   }
},
computed: {
   tagsList() {
      let tagsList = this.$store.state.tagsList.map(item=>{
          return item.name
      });
      return tagsList;
   }
}

import Vue from "vue";
import Vuex from "vuex";
import storage from "../utils/storage";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    menuList: storage.get('menuList') || [],
    tagsList: [],
    collapsed: false,
    stationId: storage.get('stationId') || '',
    stationCode: storage.get('stationCode') || '',
    stationName: storage.get('stationName') || '',
  },
  mutations: {
    setStationInfo(state, data){
      state.stationId = data.stationId;
      state.stationCode = data.stationCode;
      state.stationName = data.stationName;
      storage.set('stationId', data.stationId);
      storage.set('stationCode', data.stationCode);
      storage.set('stationName', data.stationName);
    },
    setMenuList(state, data){
      state.menuList = data;
      storage.set('menuList', data)
    },
    setTagsItem(state, data) {
      state.tagsList = data;
    },
    delTagsItem(state, data) {
      state.tagsList.splice(data.index, 1);
    },
    clearTags(state) {
      state.tagsList = []
    },
    closeTagsOther(state, data) {
      state.tagsList = data;
    },
    closeCurrentTag(state, data) {
      for (let i = 0, len = state.tagsList.length; i < len; i++) {
        const item = state.tagsList[i];
        if (item.path === data.$route.fullPath) {
            if (i < len - 1) {
                data.$router.push(state.tagsList[i + 1].path);
            } else if (i > 0) {
                data.$router.push(state.tagsList[i - 1].path);
            } else {
                data.$router.push("/");
            }
            state.tagsList.splice(i, 1);
            break;
        }
      }
    },
    hadndleCollapse(state, data) {
      state.collapsed = data;
    }
  },
  actions: {},
  modules: {},
});

刚开始一直缓存不成功，后来发现我缓存的tagsList是一个字符串，哈哈~，要被自己挖的坑给坑死，在此记录一下，如果开发中小伙伴们有遇到同类型的问题，一点要多看文档，注意细节！