再谈 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 的用法，网上的相关资料很多，请自行搜索学习。