Vueタブとキャッシュページを切り替えるいくつかの方法

Vueタブとキャッシュページを切り替えるいくつかの方法

1. 切り替え方法

動的コンポーネントを使用すると、誰でも理解できると思います(一部のコードは省略されています)

// <button @click="changeView">ビューの切り替え</button> をクリックすると、2 つのコンポーネントを切り替えることができます。
<コンポーネント:is="currentView"></コンポーネント>

 「@/views/pageA」からpageAをインポートします。
「@/views/pageB」からページBをインポートします。

 計算: {
  現在のビュー(){
      this.viewList[this.index]を返します。
  }
},
 メソッド: {
  ビューを変更する() {
    this.index=(++this.index)%2
  }
}

注: これは主に、1 つのページ内の複数のサブモジュールに使用されます。通常、より頻繁な切り替えには次のルーティングが使用されます。

ルーティングを使用する(これはルーティングの設定の問題なので、詳細は説明しません)

2. タブを動的に生成する

一般的に、UI フレームワークが提供するタブ切り替えは上記のようなものであり、複数のタブページやその他の構成を自分で記述する必要があります。しかし、左側のディレクトリをクリックしてタブ ページを生成し、いつでも閉じることができるようにしたい場合はどうすればよいでしょうか (以下を参照)。

ルートにクリック イベントを与え、ルート アドレスをリストに保存し、別のフラット タブ ディレクトリにレンダリングするだけです。

レイアウトが次のようになっているとします。左側にディレクトリ、上部にタブ、そして単語が書かれたページです。

<メニュー>
  <menu-item v-for="(item,index) in menuList" :key="index" @click="addToTabList(item.path)">
    <router-link :to="item.path">{{item.name}}</router-link>
  <メニュー項目>
</メニュー>
<テンプレート>
  <menu class="left"/>//メニューコード部分は上記と同じ <div class="right">
    <タブリスト>
      <tab-item v-for="(item,index) in tabList" :key="index">
        <router-link :to="item.path">{{item.name}}</router-link>
        <icon class="delete" @click="deleteTab"></icon>
      </タブ項目>
    </タブリスト>
    <ページビュー>
      <router-view></router-view>//ここにページが表示されます </page-view>
  </div>
</テンプレート>

上記のコードは実際のコードではなく、大まかなアイデアのみを示しています。 addToTabList と deleteTab のやり方は、配列メソッドの単純な push と splice 操作だけです。見栄えの良い効果を実現するには、タブにいくつかのアクティブなスタイルも必要になる場合がありますが、ここでは説明しません。

3. キャッシュコンポーネント

タブを切り替えるだけでは十分ではありません。結局のところ、誰もがタブ間を切り替えたいのです。入力したフォーム情報や、クエリされたデータのリストなど、操作の進行状況をさまざまなタブに保存する必要があります。
では、コンポーネントをどのようにキャッシュするのでしょうか?
Vueのkeep-aliveコンポーネントを使用するだけでよい

3.1 キープアライブ

  • <keep-alive> は Vue の組み込みコンポーネントであり、コンポーネントの切り替え中に状態をメモリ内に保持して、DOM の繰り返しレンダリングを防ぐことができます。
  • <keep-alive> 動的コンポーネントをラップする場合、非アクティブなコンポーネント インスタンスは破棄されるのではなくキャッシュされます。
  • <keep-alive> は <transition> に似ていますが、抽象コンポーネントです。DOM ツリー (実ツリーでも仮想ツリーでも) にはレンダリングされず、親コンポーネント チェーンにも存在しません。たとえば、keep-alive は this.$parent には存在しません。

注意: 固定コンポーネントをキャッシュするためにキープアライブを使用することはできません。無効になります。

//無効な <keep-alive>
  <私のコンポーネント></私のコンポーネント>
</キープアライブ>

3.2 使用

3.2.1 Vue 2.1 より前のバージョンの使用

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

ルーティング情報にルーターのメタ情報を設定する必要があります

デフォルトの新しいルーターをエクスポートします({
  ルート: [
    {
      パス: '/a',
      名前: 'A'、
      成分: A、
      メタ: {
        keepAlive: false // キャッシュは不要 }
    },
    {
      パス: '/b',
      名前: 'B'、
      成分: B、
      メタ: {
        keepAlive: true // キャッシュする必要がある }
    }
  ]
})

3.2.2 比較的新しいシンプルな使用法

すべてのコンポーネント/ルートを直接キャッシュする

<キープアライブ>
    <ルータービュー/>
</キープアライブ>
<キープアライブ>
   <コンポーネント :is="view"></コンポーネント>
</キープアライブ>

キャッシュする必要があるコンポーネント/ルートを処理するには、include を使用します。
include にはいくつかの使い方があります。配列、句読点で区切られた文字列、正規表現などです。正規表現を使用する場合は、v-bind を使用してバインドする必要があります。

<keep-alive include="['a','b']">//a、b という名前のコンポーネントをキャッシュします<keep-alive include="a,b">//a、b という名前のコンポーネントをキャッシュします<keep-alive :include="/^store/">//名前が store で始まるコンポーネントをキャッシュします <router-view/>//router-view にすることができます
    <component :is="view"></component>//動的コンポーネントにもなります</keep-alive>

exclude を使用してキャッシュする必要のないルートを除外することは、include の逆です。exclude 内のコンポーネントはキャッシュされません。使い方は似ているので、ここでは詳しく説明しません。

3.2.3 かなり奇妙な状況: ページ ジャンプ方法が A->C と B->C の 2 つある場合、A から C にジャンプするときにはキャッシュする必要はありませんが、B から C にジャンプするときにはキャッシュする必要があります。現時点では、これを実現するには、古いバージョンと組み合わせたルーティング フックを使用する必要があります。

エクスポートデフォルト{
  データ() {
    戻る {};
  },
  メソッド: {},
  beforeRouteLeave(to, from, next) {
    to.meta.keepAlive = false; // 次のページをキャッシュしない next();
  }
};
エクスポートデフォルト{
  データ() {
    戻る {};
  },
  メソッド: {},
  beforeRouteLeave(to, from, next) {
    // 次のルートのメタを設定する
    to.meta.keepAlive = true; //次のページキャッシュ next();
  }
};

3.3 キャッシュコンポーネントライフサイクル機能

キャッシュ コンポーネントを初めて開くときは、通常のコンポーネントと同様に、created や mounted などの関数も実行する必要があります。
ただし、再度アクティブ化および非アクティブ化されると、これらの共通コンポーネントのライフサイクル関数は実行されず、さらに 2 つの固有のライフサイクル関数が実行されます。

  • 活性化された

これは、キャッシュされたコンポーネントが再アクティブ化されたときに呼び出されます。

  • 無効化

これは、キャッシュされたコンポーネントが非アクティブ化されたときに呼び出されます。

上記は、vue タブを切り替えてキャッシュされたページを処理するいくつかの方法の詳細です。vue タブを切り替えてキャッシュされたページを処理する詳細については、123WORDPRESS.COM の他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • Vueタブとキャッシュページを切り替えるいくつかの方法
  • Vueはタブを切り替えてデータの状態を維持する3つの方法を実装します
  • Vueは動的コンポーネントを使用してTAB切り替え効果を実現します
  • Vueコンポーネント開発におけるタブ切り替えコンポーネントの使用の詳細な説明
  • Vue は、要素タブを切り替えたときに echart が正しく表示されない問題を解決します
  • Vue タブは一定の高さまでスクロールし、上部に固定され、タブをクリックしてさまざまなコンテンツ操作を切り替えます。
  • Vueはデータの状態を維持するためにタブ切り替えを実装します
  • Vueタブ切り替え、echartstチャートの幅が100pxしかない問題を解決
  • Vue vantUI タブを切り替えたときにリスト コンポーネントがロード イベントをトリガーしない問題と解決策

<<:  MySQL の JSON 挿入の問題

>>:  Linux での umask の使用に関する詳細な説明

推薦する

Vueのフィルターとディレクティブの詳細な説明

目次vueカスタムディレクティブグローバル指令ローカル指示使用フック関数(両方ともオプション)使用方...

MySQL インフラストラクチャ チュートリアル: クエリ ステートメント実行プロセスの詳細な説明

序文私は以前から、SQL 文がどのように実行され、どのような順序で実行されるのかを知りたいと思ってい...

MySQL は低速クエリを可能にします (EXPLAIN SQL ステートメントの使用の概要)

今日、データベース操作はますますアプリケーション全体のパフォーマンスのボトルネックになりつつあり、こ...

HTML で 2 列レイアウトを実装する方法の例 (左側は固定幅、右側は適応幅)

HTMLは2列レイアウトを実装し、左側は固定幅、右側は適応幅です。実装1: <スタイル>...

VMware 仮想マシンに固定 IP アドレスを設定する方法 (グラフィック チュートリアル)

1. メニューバーで「編集」→「仮想ネットワーク エディター」を選択して仮想ネットワーク エディタ...

vue+drf+サードパーティのスライディング検証コードアクセスの実装

目次1. 背景2. 検証プロセス3. 検証を作成する4. フロントエンドコード4.1 コアjsファイ...

Vueプロジェクトはログインと登録の効果を実現します

この記事の例では、ログインと登録の効果を実現するためのvueプロジェクトの具体的なコードを共有してい...

Docker-compose におけるdepends_on 順序問題を解決する方法についての簡単な説明

コンテナをソートするためにdepends_onを使用しても、コンテナ間の依存関係の問題は完全には解決...

Linux サーバーでフォルダー、ファイル、解凍コマンドを削除する方法

1. フォルダを削除する例: rm -rf /usr/java /usr/javaディレクトリとその...

複数のフィールドをグループ化するMySQLグループ

日常の開発タスクでは、データ テーブル内のグループ化フィールドに基づいて統計データを取得するために、...

MySQL がデュアルマスターで構成されている場合にデータループの競合を回避する方法

あなたはこの質問について考えたことがあるでしょうか?デュアルアクティブが構成されている場合、データル...

このポイントのJavaScriptの基本

目次これ方法オブジェクト内これを隠した厳密モード要約するJavaScript の this も不思議...

JavaScript でオブジェクトのプロパティを削除する方法

1. 削除delete は、オブジェクトのプロパティを残さずに削除する唯一の方法ですが、その「代替」...

Nginx 書き換えジャンプの適用シナリオの詳細な説明

アプリケーションシナリオ1: ドメイン名ベースのリダイレクト会社の古いドメイン名は www.accp...

左右の幅を固定し、中央の幅を適応させたHTMLレイアウトのソリューションの詳細な説明

この記事では、次のように、誰にでも共有できる左右幅固定のミドルアダプティブ HTML レイアウトソリ...