Vue3 はページ キャッシュを実装し、タブ ページの切り替えは変更されません

この部分の実現は主に2つのステップに分かれます。

まず、index.jsでジャンプルートを以下のように設定します。

{
    path: "control",
    name: "Control",
    component: () => import("../page/Control.vue"),
    meta:{
        keepAlive: true //此页面需要缓存
    }
},

ページをキャッシュする必要がある場合は、次のコードを追加します。それ以外の場合は、 false に設定します。

meta:{
    keepAlive: true //此页面需要缓存
}

次に、メイン ページで、ルートにジャンプする場所を見つけます。私のメイン ページは、エル ペインの後ろにジャンプする MainLayout.vue です。元のページは次のとおりです。

<el-tab-pane
v-for="item in editableTabs"
:key="item.index"
:label="item.title"
:name="item.index"
:closable="handleisClose(item)"
></el-tab-pane>

<router-view />

 次のように変更できます

<el-tab-pane
v-for="item in editableTabs"
:key="item.index"
:label="item.title"
:name="item.index"
:closable="handleisClose(item)"
></el-tab-pane>

<router-view v-slot="{ Component }">
    <keep-alive>
        <component :is="Component" />
    </keep-alive>
</router-view>

以上でタブページのキャッシュ機能が完成しました。みなさんもぜひ「いいね！」してコレクションしてください。