本篇文章为大家展示了vuex + keep-alive实现tab标签页面缓存功能，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。
让客户满意是我们工作的目标，不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户，将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴，公司提供的服务项目有：域名申请、网络空间、营销软件、网站建设、新乡网站维护、网站推广。
原理
Vue 提供的 keep-alive API实现对路由组件的缓存。 include 属性可以绑定一个数组，里面是需要路由组件的 name 值，可以实现对该路由组件进行缓存，如果不需要对路由进行缓存，直接移除该项元素即可。
代码组织和设计
实现上面的功能，采用 vuex 进行全局的缓存数据保存，定义为 cacheView ;已经打开的路由页面用 toolBarData 进行保存。下图是代码是代码设计整体图:
需要添加一个路由页面到 cacheView ，需要有 actions setCacheView 来 commit 一个 change Event 对 state 数据进行更改，然后修改后的数据会自动派发到 App.vue 中使用到该数据的位置（即 keep-alive
处）。而添加标签页也是类似的流程，不再描述。至于为什么要把标签页和路由缓存页面分离成两个数组，主要是有两方面的考虑：
name
store代码实现
store 代码实现如下所示，主要需要比较详细说明的是 clearToolItem ,这个函数是清除标签页。涉及两个规则：
如果关闭是当前处于激活的标签页，关闭之后。处于激活的标签页就默认是最后一个打开的标签页。
如果当前标签页是最后一个（处于激活状态），则关闭后自动默认它的前一个为默认激活标签页。
import router from '../router'
export default {
state: {
toolBarData:[],// 保存标签button的数组
cacheView:[] // 保存需要缓存的数组
},
getters: {
getToolData(state){
return state.toolBarData;
},
getCacheView(state){
return state.cacheView;
}
},
mutations: {
setToolData(state, data) { // 添加标签按钮，如果当前路由已经打开，则不再重复添加
const inToolbar = state.toolBarData.find(item => item.detail === data.detail)
!inToolbar && state.toolBarData.push({
...data
});
},
setCacheView(state,data){ // 与setToolData类似
if(state.cacheView.includes(data.componentName))
return;
state.cacheView.push(data.componentName);
},
clearToolItem(state,detail){
const index = state.toolBarData.findIndex(item => item.detail === detail);
const isActive = router.app.$route.path == state.toolBarData[index]["detail"];
const len = state.toolBarData.length - 1;
state.toolBarData.splice(index,1);
(index == len || isActive) && router.push({path:state.toolBarData[state.toolBarData.length - 1]["detail"]});
},
clearCacheView(state,viewName){
const index = state.cacheView.findIndex(item => item == viewName);
state.cacheView.splice(index,1);
}
},
actions: {
commitToolBar({commit},data) {
commit("setToolData",data);
commit("setCacheView",data);
},
clearToolBar({commit},data){
commit("clearToolItem",data.detail);
},
clearCache({commit},data){
commit("clearCacheView",data);
}
}
}入口文件缓存路由
在 App.vue 入口文件，使用 keep-alive 对匹配的路由组件进行缓存，监听当前路由变化，添加缓存路由和标签。
