Vueはタブを切り替えてデータの状態を維持する3つの方法を実装します

Vue でタブ切り替えを実装する 3 つの方法

1. v-showはコンテンツの切り替えを制御します

1. シンプル バージョンの原則: クリック イベントを使用して、タブ スタイルとコンテンツの表示と非表示を制御するスイッチとして数値を変更します。

2. データレンダリングの原則: 主に v-for によってバインドされたインデックスを使用して制御します。これは上記と同様です。

2. コンポーネントの切り替え。

1.主な知識ポイントは、is in vueとキープアライブキャッシュの特性です。

3. ルート切り替え。 (アドレスバーとデータリクエストに優しい)

これはルータリンクを通じて実現されます。

Vue タブスイッチはデータの状態を保持します

ページ上のタブを切り替える場合、切り替えるたびにコンポーネントが再インスタンス化されるため、ページがどのように切り替えられてもタブ内のコンテンツが変更されないようにし、ページの再レンダリングとリクエストを削減する必要があります。

実装方法: <keep-alive></keep-alive> を使用してコンポーネントをラップします。

<el-tabs v-model="アクティブ名" @tab-click="ハンドルクリック">
  <el-tab-pane label="記録">
    <キープアライブ>
      <child1 v-if="isChildUpdate"></child1>
    </キープアライブ>
  </el-tab-pane>
</el-tabs>

リストページの詳細にジャンプし、リストページに最後の操作ステータスを保持します

これは、ルーター ビューをロードし、ルーティング メタ ページをキャッシュに設定することによって実現されます。

ルータビューが複数のレイヤーにネストされている場合は、複数のレイヤーを設定し、beforeRouteLeaveを使用してルートの退出を監視し、キャッシュするかどうかを設定する必要がある場合があります。

// 他のページからジャンプする場合、ページのキャッシュは必要ありません。詳細ページから戻る場合はキャッシュが必要です。

要約する

以上で、Vue でタブ切り替えを実装する 3 つの方法と、切り替え中にデータの状態を維持する方法についての説明は終了です。Vue のタブ切り替え方法についての詳細は、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。