vue中，使用keep-alive实现页面动态缓存

A页面->B页面，B页面刷新 B页面->C页面再返回至B页面，B页面缓存不刷新

最近项目遇到如上所述这个需求，一看到页面缓存，那必不可少要使用keep-alive,但是这里的页面缓存是有条件的，同一个页面，从不同的入口进来，是有不同的缓存需求的。我们使用vuex结合路由守卫可以达到此效果，下面来看看怎么完美实现这个需求吧……
1.App.vue

<template>
  <div id="app">
		<keep-alive :include="KEEPALIVES">
			<router-view />
		</keep-alive>
  </div>
</template>
<script>
import {
     mapGetters} from "vuex";
	export default{
     
		computed:{
     
			...mapGetters(["KEEPALIVES"])    //利用vuex的getters动态监听KEEPALIVES
		}
	}
</script>

2.vuex中

const state = {
     
  keepAlives:[],   //定义keepAlives
};
const getters = {
     
  KEEPALIVES(state){
          //监听keepAlives
		return state.keepAlives
  }
};
const mutations = {
     
	SET_KEEP_ALIVE(state,keepAlives){
          //更改store中keepAlives的状态
		return state.keepAlives = keepAlives;
	}
	}，

3.在需要被缓存的页面中 ,这里就要用到路由钩子函数了
这里要注意的是，A,B,C必须是你在对应页面的export default中定义的name属性的值，而不是你在routes中定义的name属性的值

		beforeRouteEnter (to, from, next) {
     
			next(vm => {
          //因为当钩子执行前，组件实例还没被创建
    							  //vm 就是当前组件的实例相当于上面的 this，所以在 next 方法里你就可以把 vm 当 this 来用了。
				if (from.name=="A") {
     
					vm.$store.commit('SET_KEEP_ALIVE', ['B']);
				}
			})
		},
		
		//离开该组件的对应路由时调用
		beforeRouteLeave (to, from, next) {
     
			if (to.name == "C") {
     
				this.$store.commit('SET_KEEP_ALIVE', ['B']);
			} else if (to.name=="A") {
     
				this.$store.commit('SET_KEEP_ALIVE', []);
			}
			next();
		},