再谈 Vue 中使用 keep-alive ：结合 activated & include & vuex & 路由的 beforeEach 动态缓存
上次写了一篇关于 Vue中使用 keep-alive 的文章，现在看来，只能说是一篇针对 keep-alive 最简单用法的介绍，但往往，这样的用法不能满足实际的需求，因此，结合这次项目开发，我们再来谈谈如何利用 keep-alive 做到动态缓存：
项目需求：在项目的众多页面中，有一个 a 页面，同时 a 页面，包含 b、c、d 三个子页面，需求是：
1.当且仅当用户从 e 页面 导航 到 a 页面时，缓存页面 a 下面的 b、c、d 三个子页面，
2.同时页面 a 下面的 b、c、d 三个子页相互切换时，缓存他们，
3.当路由跳离页面 a 再重新进入到页面 a 时，清除之前的缓存。
（说晕了，看路由吧：）
{
path:'/formDesign',
name:'FormDesign',
component: (resolve) => require(["@/page/formDesign/index"], resolve),
redirect: '/baseForm', //指定默认路由（重定向）
children:[
{
path:'/baseForm',
name:'BaseForm',
component: (resolve) => require(["@/page/formDesign/baseForm"], resolve)
},
{
path:'/controlAssembly',
name:'ControlAssembly',
component: (resolve) => require(["@/page/formDesign/controlAssembly"], resolve)
},
{
path:'/processDesign',
name:'ProcessDesign',
component: (resolve) => require(["@/page/formDesign/ProcessDesign"], resolve)
},
]
},效果图：
好了，我们现在来说说实现方式：
第一步：
FormDesign.vue
第二部，BaseForm.vue、ControlAssembly.vue和ProcessDesign.vue三个页面，分别用 activated() 方法缓存页面 name
( pushNameToincludedArr 是我自己在 vuex 中定义修改 includedArr 的方法)
//BaseForm.vue
//ControlAssembly.vue
//ProcessDesign.vue
先看下 store ：
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const state = {
//...省略上下文
includedArr:[],
};
const mutations = {
//...省略上下文
pushNameToincludedArr(state,payload){
if((state.includedArr).indexOf(payload) == -1){
(state.includedArr).push(payload)
}else{
return
};
},
cleanUpTheincludedArr(state){
state.includedArr = [];
},
}
export default new Vuex.Store({
state,
mutations
});最后，在 main.js 中定义了一个全局的 beforeEach 方法：
main.js
//...省略上下文
//引入router
import VueRouter from 'vue-router'
Vue.use(VueRouter)
import router from './router'
//引入vuex
import Vuex from 'vuex'
Vue.use(Vuex)
import store from './store'
router.beforeEach((to, from, next) => {
let addPage = ['BaseFormc','ControlAssembly','ProcessDesign'];
if (addPage.indexOf(to.name) == -1 ) { //判断数组是否包含。
store.commit('cleanUpTheincludedArr');
}
next();
})
//...省略上下文由此，需求实现。
其中，关于 activated & include & vuex & 路由的 beforeEach 的用法，网上的相关资料很多，请自行搜索学习。