项目场景：

在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是一个字符串，哈哈~，要被自己挖的坑给坑死，在此记录一下，如果开发中小伙伴们有遇到同类型的问题，一点要多看文档，注意细节！