하나, 장면
페이지 A는 작성 후 페이지 B로 리디렉션되어야 하는 양식 페이지입니다. 페이지 B가 아무 동작 없이 돌아오면 페이지 A의 내용을 복원해야 하고, 페이지 B가 제출을 클릭한 후 다시 페이지 A로 돌아오면 캐시를 지워야 합니다.
둘째, 구현 방법
페이지 A가 데이터를 캐시하려면 keep-alive로 래핑해야 합니다.
페이지 B가 제출을 클릭한 후 캐시를 지워야 하는 경우 페이지 A의 연결 유지 캐시를 지워야 합니다.
따라서 keep-alive의 :include 속성을 사용할 수 있습니다. 이 목록에 있는 페이지에만 캐시가 있고 이 목록에 없는 페이지에는 캐시가 없으며 다음에 입력할 때 다시 렌더링됩니다.
被 keep-alive 包裹的组件的生命周期是有区别于普通的组件。
被 keep-alive 包裹的组件中，会多出两个生命周期 activated、deactivated。
第一次进入被 keep-alive 包裹的组件中的时候会依次调用 beforeCreate -> created -> beforeMount -> mounted -> activated，其后的进入皆只会调用 activated，因为组件被缓存了，再次进入的时候，就不会走 创建、挂载 的流程了。
被 keep-alive 包裹的组件退出的时候就不会再执行 beforeDestroy、destroyed 了，因为组件不会真正意义上被销毁，相对应的组件退出的时候会执行 deactivated 作为替代。
따라서 다음과 같이 생각할 수 있습니다.
第一步：路由发生改变时（例如跳转A页面时），将A页面加入keep-alive缓存include，然后页面开始渲染
第二步：A页面填写表单完成后跳转B页面
第三步：B页面提交表单完成后把A页面从include中移除。
第四步：这时候无论从哪里进入A页面，都需要重新加入include缓存，并重新渲染了（重新走第一步）。而如果没有第三步的移除缓存，则再进入A时会拿缓存的A页面。
셋째, 특정 구현 코드 논리
데모로 vue-template-admin을 사용했기 때문에 구현 방법에 대해 이야기하겠습니다.
첫 번째 단계: keep-alive 패키지 구성 요소
기본 레이아웃 페이지:
<template>
<section class="app-main">
<transition name="fade-transform" mode="out-in">
<keep-alive :include="cachedViews">
<router-view :key="key" />
</keep-alive>
</transition>
</section>
</template>
<script>
export default {
name: "AppMain",
computed: {
cachedViews() {
return this.$store.state.tagsView.cachedViews
},
key() {
return this.$route.path
}
}
}
</script>
2단계: vuex에서 tagsView 모듈을 확인합니다.
const state = {
cachedViews: []
}
const mutations = {
ADD_CACHED_VIEW: (state, view) => {
if (state.cachedViews.includes(view.name)) return
if (!view.meta.noCache) {
state.cachedViews.push(view.name)
}
},
DEL_CACHED_VIEW: (state, view) => {
const index = state.cachedViews.indexOf(view.name)
index > -1 && state.cachedViews.splice(index, 1)
},
}
export default {
namespaced: true,
state,
mutations,
actions
}
포함을 추가하고 제거하는 방법은 다음과 같습니다.
3단계: router.js 파일에서 구성 확인
{
path: "/test",
component: Layout,
redirect: "/test/test-one",
children: [
{
path: "test-one",
component: () => import("@/views/test-one/index"),
name: "TestOne",
meta: {
title: "表单测试", icon: "el-icon-warning", noCache: false }
},
{
path: "test-two",
hidden: true,
component: () => import("@/views/test-two/index.vue"),
name: "TestTwo",
meta: {
title: "表单提交",
activeMenu: "/test/test-one",
noCache: true
}
}
]
}
주로 메타의 name 속성과 noCache 속성입니다.
4단계: 연결 유지 포함 캐시가 추가된 시점 확인
아래 그림을 보면 현재 경로의 변경이 감시되고 있음을 알 수 있습니다. 경로가 변경되면 vuex의 ADD_CACHED_VIEW 메서드를 호출하여 현재 페이지에 해당하는 이름을 배열에 추가합니다. 경로가 변경될 때 페이지가 렌더링되지 않았기 때문에 이때 추가하면 페이지가 렌더링될 때 캐시될 수 있습니다.
5단계: 캐시를 제거하려면 제출 양식 페이지를 참조하십시오.
페이지 A가 캐시된 경우 양식을 작성하고 페이지 B에 들어간 후 양식을 제출한 후 A의 캐시를 제거해야 합니다. 따라서 페이지 B:
<template>
<div class="activity-list">
第二个测试页面
<button @click="back">提交代码</button>
</div>
</template>
<script>
export default {
name: "TestTwo",
data() {
return {
}
},
created() {
},
mounted() {
},
methods: {
back() {
this.$store.commit("tagsView/DEL_CACHED_VIEW", {
name: "TestOne" })
this.$router.go(-1)
}
}
}
</script>
<style scoped lang="scss"></style>
tagsView/DEL_CACHED_VIEW를 호출하면 제거된 것을 알 수 있다. 먼저 제거되었기 때문에 이때 A페이지로 돌아가면 A페이지가 다시 캐시에 추가되고 렌더링이 다시 시작됩니다.