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 選

推薦する

CSSでフォントアイコンを使用する方法をお教えします

まず、フォントアイコンとは何でしょうか?表面的にはアイコンですが、実際はテキストです。テキストの設定...

Tomcat および Web アプリケーションの Docker デプロイメントの実装

1.dockerをオンラインでダウンロードする yum インストール -y epel-release...

Mysql+JavaSwing に基づくスーパーマーケット商品管理システムの設計と実装

目次1. 機能紹介2. キーコード2.1 ホームページの機能2.2 製品情報を追加する2.3 データ...

CentOS7 で jar アプリケーションの起動を設定する方法

プロジェクトの展開中に遭遇した落とし穴Zhihudemo を展開する際、Jenkins などの自動展...

JavaScript は div マウス ドラッグ効果を実装します

この記事では、divマウスドラッグ効果を実現するためのJavaScriptの具体的なコードを参考まで...

Vueコンポーネントが相互に値を転送する方法の詳細な説明

目次概要1. 親コンポーネントが子コンポーネントに値を渡す2. 子コンポーネントが親コンポーネントに...

Vue のグローバル ウォーターマーク実装例

目次1. 透かしのJsファイルを作成する2. 導入操作2.1 App.vueや他のページでの参照2....

同じレベルの要素で Position:fixed と margin-top を一緒に使用する場合の CSS の問題

問題の説明CSS を使用して上部の固定効果を実現したいと思います。 margin-top と pos...

MYSQL の解凍版における中国語の文字化け問題の解決方法

MYSQLの解凍バージョンがインストールされます1: 解凍後、my.ini ファイルをコピーし、バイ...

Vue3.0 ルーティング自動インポート方法の例

1. 前提条件インポートには require.context メソッドを使用します。vite で作成...

MySQL グリーン解凍バージョンのインストールと設定手順

手順: 1. MySQLデータベースをインストールする1. MySQL-5.6.17-winx64....

Debian システムでの自動パッケージ更新の問題を解決する方法

いつから始まったのかはわかりませんが、コンピュータの電源を入れてインターネットに接続するたびに、デー...

Alibaba Cloud Server ドメイン名解決手順 (初心者向けチュートリアル)

ウェブサイトの構築を始めたばかりの初心者には、理解し、学ぶべきことがたくさんあります。ウェブサイトを...

Centos8 システムの VMware インストール チュートリアル図 (中国語グラフィカル モード)

目次1. ソフトウェアとシステムイメージ2. 仮想マシンを作成する3. CentOS8をインストール...

MySQL スロークエリログの基本的な使い方チュートリアル

スロークエリログ関連のパラメータMySQL スロー クエリ関連のパラメータの説明: slow_que...