キープアライブとは何ですか? 通常の開発では、コンポーネントによっては複数回初期化する必要のないものもあります。このとき、コンポーネントの状態が変更されず、次回表示されるときにコンポーネントが再初期化されないように、コンポーネントを永続化する必要があります。 つまり、keepalive は Vue の組み込みコンポーネントであり、これを使用すると、含まれるコンポーネントの状態を保持したり、再レンダリングを回避したりできます。これをコンポーネントキャッシュと呼びます 基本的な使い方 <キープアライブ> <component /> // コンポーネント</keep-alive> 要件:リスト ページから詳細ページに入り、リスト ページに戻るとクエリ条件は保持されますが、他のタブに切り替えるとクエリ条件はクリアされます。 解決策:クエリ条件を保持するのは非常に簡単で、直接 keep-alive を導入するだけですが、それらをクリアしたい場合は、Vue 自体にはそれらを直接クリアするための API がないため、別途処理する必要があります。 参考記事: http://aspedrom.com/5HD5 router/index はルートをインターセプトして処理します。 beforeRouteLeave:function(to, from, next){ // ルートを離れるときにキープアライブクリアを追加する if (from && from.meta.rank && to.meta.rank && from.meta.rank == to.meta.rank) ここでの判断は、前のレイヤーに戻るかどうかです。ここでの判断ロジックは、自分の業務に合わせて変更し、このレイヤーのキャッシュを破棄するかどうかを決めることができます。 (this.$vnode && this.$vnode.data.keepAlive) の場合 { (this.$vnode.parent && this.$vnode.parent.componentInstance && this.$vnode.parent.componentInstance.cache) の場合 { (this.$vnode.componentOptions) の場合 { var キー = this.$vnode.key == null ? this.$vnode.componentOptions.Ctor.cid + (this.$vnode.componentOptions.tag ? `::${this.$vnode.componentOptions.tag}` : '') : this.$vnode.key; var キャッシュ = this.$vnode.parent.componentInstance.cache; var キー = this.$vnode.parent.componentInstance.keys; if (キャッシュ[キー]) { if (キーの長さ) { var インデックス = keys.indexOf(キー); (インデックス>-1)の場合{ キーを連結します(インデックス、1); } } キャッシュ[キー]を削除します。 } } } } これを破棄します。 } 次(); }, ルートにメタも追加します: { //アカウントリストのパス: '/account', 名前: 'アカウント', コンポーネント: () => import('../views/account/index.vue'), meta: { title: 'アカウントリスト' ,rank:1.5} }, { //アカウントパスを追加: '/accountadd', 名前: 'accountadd', コンポーネント: () => import('../views/account/add.vue'), meta: { title: 'アカウントを追加' ,rank:2.5} }, { // アカウントパスの編集: '/accountedit/:id', 名前: 'accountedit', コンポーネント: () => import('../views/account/add.vue'), meta: { title: 'アカウントを編集' ,rank:2.5} }, { // ロールリストのパス: '/role', 名前: '役割', コンポーネント: () => import('../views/role/index.vue'), meta: { title: '役割リスト' ,rank:1.5} }, 要約する Vue で keep-alive を使用した後のキャッシュクリアに関するこの記事はこれで終わりです。keep-alive キャッシュクリアに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: MySQL InnoDB row_id 境界オーバーフロー検証方法の手順
>>: Windows での PyTorch 開発環境のインストール チュートリアル
目次概要ブロブBlob の動作BLOB ダウンロード ファイルブロブ画像のローカル表示BLOB ファ...
目次1. はじめに2. 方法の紹介3. 使用例要約する1. はじめに配列フィルターは、フロントエンド...
1. Nginx ステータス監視Nginx には、Nginx の全体的なアクセス ステータスを監視す...
目次1. トリガーソリューション2. パーティションテーブルソリューション3. 一般的な表領域ソリュ...
テーブルが 2 つあり、テーブル A のレコードがテーブル B に存在しない可能性があります。左結合...
数字で始まる次の CSS クラス名は有効になりません。 .1番目{ 色: 赤; }有効な CSS ク...
MySQL には 3 つの日付型があります。日付(年-月-日)テーブル test(hiredate ...
前回の記事【dockerコンテナのためのdockerfileを詳しく解説】では、dockerfile...
目次序文文章1. グローバル登録2. 部分登録3. フック機能とパラメータ設定4. 柔軟な使い方(1...
1 はじめにRedis 、 ANSI C言語で開発されたKey-Valueベースの高性能NoSQLデ...
コードをコピーコードは次のとおりです。 <html> <ヘッド> <t...
1. 基本的な Spring-boot クイックスタート1.1 クイックスタート pom.xml は...
1.画像をダウンロードするdocker pull selenium/hub docker pull ...
目次1. JavaScript エンジンとは何ですか? 2. V8エンジン3. ランタイム環境4. ...
フォーム項目を動的に追加するiview の動的なフォーム追加は非常に簡単です。フォーム項目を配列に設...