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. キャッシュコンポーネントタブを切り替えるだけでは十分ではありません。結局のところ、誰もがタブ間を切り替えたいのです。入力したフォーム情報や、クエリされたデータのリストなど、操作の進行状況をさまざまなタブに保存する必要があります。 3.1 キープアライブ
注意: 固定コンポーネントをキャッシュするためにキープアライブを使用することはできません。無効になります。 //無効な <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 を使用します。 <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 などの関数も実行する必要があります。
これは、キャッシュされたコンポーネントが再アクティブ化されたときに呼び出されます。
これは、キャッシュされたコンポーネントが非アクティブ化されたときに呼び出されます。 上記は、vue タブを切り替えてキャッシュされたページを処理するいくつかの方法の詳細です。vue タブを切り替えてキャッシュされたページを処理する詳細については、123WORDPRESS.COM の他の関連記事に注目してください。 以下もご興味があるかもしれません:
|
>>: Linux での umask の使用に関する詳細な説明
目次vueカスタムディレクティブグローバル指令ローカル指示使用フック関数(両方ともオプション)使用方...
序文私は以前から、SQL 文がどのように実行され、どのような順序で実行されるのかを知りたいと思ってい...
今日、データベース操作はますますアプリケーション全体のパフォーマンスのボトルネックになりつつあり、こ...
HTMLは2列レイアウトを実装し、左側は固定幅、右側は適応幅です。実装1: <スタイル>...
1. メニューバーで「編集」→「仮想ネットワーク エディター」を選択して仮想ネットワーク エディタ...
目次1. 背景2. 検証プロセス3. 検証を作成する4. フロントエンドコード4.1 コアjsファイ...
この記事の例では、ログインと登録の効果を実現するためのvueプロジェクトの具体的なコードを共有してい...
コンテナをソートするためにdepends_onを使用しても、コンテナ間の依存関係の問題は完全には解決...
1. フォルダを削除する例: rm -rf /usr/java /usr/javaディレクトリとその...
日常の開発タスクでは、データ テーブル内のグループ化フィールドに基づいて統計データを取得するために、...
あなたはこの質問について考えたことがあるでしょうか?デュアルアクティブが構成されている場合、データル...
目次これ方法オブジェクト内これを隠した厳密モード要約するJavaScript の this も不思議...
1. 削除delete は、オブジェクトのプロパティを残さずに削除する唯一の方法ですが、その「代替」...
アプリケーションシナリオ1: ドメイン名ベースのリダイレクト会社の古いドメイン名は www.accp...
この記事では、次のように、誰にでも共有できる左右幅固定のミドルアダプティブ HTML レイアウトソリ...