一つ、現場
ページ A はフォーム ページであり、入力後にページ B にリダイレクトする必要があります。ページ B が何も操作せずに戻った場合は、ページ A のコンテンツを復元する必要があります。ページ B が送信をクリックしてページ A に戻った場合は、キャッシュをクリアする必要があります。
第二に、実装方法
ページ A がデータをキャッシュしたい場合は、キープアライブでラップする必要があります。
ページ 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页面。
3 番目に、特定の実装コード ロジック
デモとして 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
}
}
]
}
主に、meta の 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が再度キャッシュに追加され、再びレンダリングが開始されます。