Vueはページキャッシュ機能を実装する

この記事の例では、ページキャッシュ機能を実装するためのVueの具体的なコードを参考までに共有しています。具体的な内容は次のとおりです。

キープアライブは主にリストページから詳細ページにジャンプするために使用され、その後「戻る」をクリックしたときに、ページキャッシュがリソースを再度要求する必要がなくなります。

1. ルーターでルーティングを設定する

メタでページをキャッシュする必要があるかどうかを定義する

「vue」からVueをインポートします。
「vue-router」から Router をインポートします。

// 現在の場所への冗長なナビゲーションを避ける const originalPush = Router.prototype.push
Router.prototype.push = 関数push(location) {
   元のPush.call(this, location).catch(err => err) を返します
}

Vue.use(ルーター);
デフォルトの新しいルーターをエクスポートします({
  ベース: ''、
  ルート: [{
      パス： "/"、
      名前: "インデックス",
      コンポーネント: () => import("@/layout"),
      リダイレクト: '/login',
      子供たち： [
        {
          パス: 'dutySheet',
          名前: 'dutySheet',
          コンポーネント: () => import("@/pages/Dashboard/DutySheet")
        },
        {
          パス: 'searchWord',
          名前: '検索ワード',
          コンポーネント: () => import("@/pages/dailyReportManage/searchWord/index"),
          メタ: {
            keepAlive: true // ページをキャッシュする必要があります}
        },
        // マッチングメンテナンス{
          パス: "troopAction",
          名前: "troopAction",
          コンポーネント: () => import("@/pages/Dashboard/TroopAction"),
          メタ: {
            keepAlive: false // キャッシュは不要}
     },
      ]
    },
  ]
});

2. APP.vueを設定する

キャッシュにキープアライブを使用する

<キープアライブ>
    <ルータービュー v-if="$route.meta.keepAlive"></ルータービュー>
</キープアライブ>
<ルータービュー v-if="!$route.meta.keepAlive"></ルータービュー>

3. 戻るボタンをクリックしたら、this.$router.back() メソッドを呼び出します。

// 戻り値 backKBnt(){
        this.$router.back()
      },

4. キャッシュをクリアする

「exhibitionWord」または「exhibitionWeekWord」ページへのジャンプのみがキャッシュされ、他のページへのジャンプはキャッシュする必要はありません。

beforeRouteLeave(to, from, next) {
      if (to.name == 'exhibitionWord' || to.name == 'exhibitionWeekWord') { // キャッシュされるルート名
          from.meta.keepAlive = true
          次（）
        }それ以外{
          from.meta.keepAlive = false
          次（）
      }
    },

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: