연결 유지 캐시가 문제를 업데이트하지 않습니다.

연결 유지를 사용하면 페이지 a에서 페이지 b로 들어갈 때 캐시가 필요하지 않고, 페이지 b가 페이지 c로 들어갈 때 페이지 b를 캐시해야 한다는 요구 사항을 충족하는 경우가 많습니다.

1. 홈 페이지에서 캐싱이 필요한지 여부를 결정하기 위해 vuex에 필드를 정의해야 합니다. 필드는 캐싱이 필요한 구성 요소의 이름입니다.

const state = {
	catch_components:['b']
};
const mutations={
	GET_CATCHE_COMPONENTS (state, data) {
	      state.catch_components = data
	}
};

2. app.vue에 keep-alive를 작성하고 vuex의 필드를 사용하여 캐시 여부를 제어합니다.

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

computed: {
      catch_components () {
        return this.$store.state.catch_components
      }
}

3. 페이지 b의 네비게이션 가드에서 페이지를 모니터링하세요.

beforeRouteEnter  (to, from, next) {
			 next(vm=>{
				 vm.$store.commit('GET_CATCHE_COMPONENTS', ['b'])//必须要这一步，否则缓存有可能回不更新
			 })
},
beforeRouteLeave (to, from, next) {
		    if (to.path === '/c') { // 去往c页的时候需要缓存组件，其他情况下不需要缓存
		      	 this.$store.commit('GET_CATCHE_COMPONENTS',['b'])//b为组件名称（name）
		        } else {
		          this.$store.commit('GET_CATCHE_COMPONENTS', [])
		        }
	next()
},