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

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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Vue でローカル キャッシュのデータを読み書きする方法
  • Vue ブラウザのローカル ストレージの問題の概要
  • Vueデータ監視の原理の詳細な説明
  • Vue はローカル キャッシュ モードを呼び出します (データの変更を監視)

<<:  VirtualBoxにOpenSuseをインストールする方法

>>:  Web フォームの入力要素の高度な使用例 11 選

推薦する

Vueは画像のズームとドラッグをサポートするリッチテキストエディタを統合しています

必要:ビジネス要件によると、写真をアップロードできる必要があり、アップロードされた写真はモバイル端末...

CSSプリコンパイル言語とその違いの詳細な説明

1. 何ですか マークアップ言語として、CSSは比較的シンプルな構文とユーザーに対する要件が低いが、...

MySQL のストアド プロシージャを使用して 100 万件のレコードをすばやく生成する方法

序文テストを行う際、大量のデータによる負荷に耐えるプロジェクトの能力をテストするために、通常はテスト...

WeChatアプレットがチャットルーム機能を実現

この記事では、参考のために、WeChatアプレットのチャットルームを実装するための具体的なコードを例...

MySQL ビューの原理と使用法の詳細な分析

序文: MySQL では、ビューはおそらく最も一般的に使用されるデータベース オブジェクトの 1 つ...

JS を使用して要素がビューポート内にあるかどうかを確認する方法

序文要素がビューポート内にあるかどうかを監視する2つの方法を共有する1. 位置計算Element.g...

nginxのインストールと設定の詳細なプロセス記録

目次1 nginxの紹介1 nginxとは何か2 つのアプリケーション シナリオ2 nginxのイン...

InnoDB がトランザクション分離レベルを巧みに実装する方法

序文前回の記事「MySQL ロック メカニズムの詳細説明」では、InnoDB のロック メカニズムに...

CSS3 を使用してピカチュウのアニメーション壁紙を作成する例

文章さて、次はレンダリングを見せましょう。画像を見て初めて理解することに興味が湧くでしょう。そうでな...

チェックボックスとラジオボタンの配置を実装する方法

ブラウザによって動作が異なるだけでなく、フォントやテキスト サイズによっても動作が異なります。フォー...

よくある HTML タグの記述エラー

HTML Police がコードを調べて意味のないタグをすべて見つけ出すので、注意を払う必要がありま...

MySQL での Join の使用に関する詳細な説明

前の章では、1 つのテーブルからデータを読み取る方法を学習しました。これは比較的簡単ですが、実際のア...

Ubuntu Server 16.04 MySQL 8.0 のインストールと設定のグラフィックチュートリアル

Ubuntu Server 16.04 MySQL 8.0 のインストールと設定のグラフィックチュー...

Navicat の MySQL へのリモート接続の実装手順の分析

序文皆さんはリモート サーバーで開発を行っており、MySQL の使用率はかなり高いはずです。コマンド...

Vue 2.0 の基礎を詳しく解説

目次1. 特徴2. 例3. オプション4. 基本的な文法5. ライフサイクル6. ルーティング管理 ...