Vue动态缓存页面

原理通过keep-alive标签的include属性及vuex完成

需求说明：A页面到B页面需要缓存，A页面到C页面不需要缓存

所要缓存页面的顶级出口

<keep-alive :include="kpAlive">
    <router-view/>
</keep-alive>

<script>
export default {
    computed: {
        /**
	      * router-alive
	    */
        kpAlive() {
            return this.$store.getters.kpAliveRouter;
        }
    }
}
</script>

store

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);
const store = new Vuex.Store({
      state: {
      	kpAliveRouter: []
      },
	  mutations: {
	  	//aliveRouter
        SET_KEEP_ALIVE: (state, keepAlive) => {
        	state.kpAliveRouter = keepAlive;
        },
	  },
	  getters: {
	  	kpAliveRouter: state => state.kpAliveRouter
	  }
})
export default store;

所要缓存的页面A

<script>
const outAliveList = ['B']
const currentName= "A"
export default {
    name: "A",
    beforeRouteEnter(to, from, next) {
        next(vm => {
            //进入默认缓存，hack：刷新后第一次不会缓存
            vm.$store.commit("SET_KEEP_ALIVE", [currentName]);
        });
    },
    beforeRouteLeave(to, from, next) {
    	//所要跳转的页面是需要缓存的B则进行缓存
		if (outAliveList.includes(to.name)) {
       		this.$store.commit("SET_KEEP_ALIVE", [currentName]);
        } else {
            this.$store.commit("SET_KEEP_ALIVE", []);
        }
        next();
	},
}    
</script>

tips：
1.此处的A为页面中name的值，不为route的name
2.如果没有达到缓存A页面效果，则需要检查A页面是否在二级（多级）的keep-alive中，如是则需要同时缓存这些层级页面