Vue: keep-aliveによって、キャッシュされたコンポーネントを動的に削除する機能が向上することを願っています

実際、フォーラムでこの質問に一度答える前に、 keep-alive of includeまたはexcludeを使用して行うことができます。

簡単な例を書くには：
https://jsfiddle.net/jingkaizhao/m5tLg7wt/2/

これは＃6259の重複ではありませんか？

@posvaはい、同様の状況です。 実行時にkeep-aliveキャッシュを動的にクリアしようとしています。

@jkzingありがとうございます、あなたのメソッドは上記のシナリオを完了することができるはずですが、リストページなどのシナリオがまだあります。タブから切り替えた場合、それが存続していることを願っています。データをメモリから直接取得した場合、データを変更した後、プログラムはバックグラウンドで新しいデータを取得することを期待してリストページにジャンプします。ページが完成した後、バックグラウンドから新しいデータを取得できますが、感じます。上記のAPIがある場合は、変更後に変更するだけで済みます。このルーターのキープアライブはクリアされ、データはバックグラウンドから自動的に取得されます。私が言ったことがあなたに理解できるかどうかはわかりません。要するに、シングルページアプリケーションを以前のiframeのマルチタブ効果と同じようにエレガントに作成できることを望んでいます：

@okjesseこれも実行できます。必要なのは、 includeまたはexcludeを上位レベルのコンポーネントにアップグレードすることだけです。または、vuexを使用する場合は、 include vuexストアに配置します。 。

つまり、Vueはこれを実現するための基本的なAPIを提供します。これを便利に使用する場合は、少しカプセル化する必要があります。

@jkzing理解してください、ありがとう、私は今自分でキープアライブ実装を書いています、私はあなたの方法に従うようにします

@jkzing 、しかしこれが達成できたとしても、このapiを使用する方が良いと思います。セマンティクスは異なります。私が欲しいのは、保持されているデータをクリアすることです。コンポーネント自体はまだ生きています。ノンストップよりスイッチが生きているかどうか

これは問題の1つにすぎません。新しいページを頻繁に開くと、メモリが多すぎて、最終的にブラウザがフリーズします。キープアライブとは関係ありません。できれば、現象を再現して@jkzingに見せることができます

私たちが達成したいのは、ページにジャンプする直前に、キャッシュされたページを使用するか、新しいページを使用するかを決定することです。古いAPIはそれを行うことができません

この要件も発生しました。次に、メニューリストをクリックして接続し、タブにラベルを追加して、新しく開いたコンポーネントをキャッシュしました。閉じるラベルをクリックして、キャッシュされたコンポーネントを削除したいと思います。これを呼び出しました。$ inコンポーネントの非アクティブ化されたフック関数。destroy（）;これによりキャッシュがクリアされますが、次回接続が開かれたときに新しいコンポーネントがキャッシュされないことがわかります。

@fadexiii既存の方法を解決しました。これは、

@okjesse私のkeep-aliveに<router-view></router-view>含まれていますincludesメソッドが機能しません

@okjesseたった今、対戦相手の名前属性を定義していませんでした。定義したら、大丈夫です、ありがとう

参考：2cba6d4cb1db8273ee45cccb8e50ebd87191244eで実装

@ fadexiii ＃6961あなたと同じニーズですが、どのように解決しますか？

@ Jack-93キープアライブインクルードを使用します。新しいタグが開かれると、現在のコンポーネント名がインクルード配列に追加され、タグが閉じられると、終了タグのコンポーネント名が配列から削除されます。

$ destroyのメソッドを見ると、これは正しい使用法だと思います。これは、コンポーネント内のさまざまなユーザーの動作によってページを離れるときにコンポーネントをキャッシュするかどうかを決定します。
（たとえば、メッセージコンポーネントの場合、このコンポーネントは、メッセージが正常に送信された後に破棄する必要があります。送信されない場合は、ユーザーが次回アクセスして続行できるようにキャッシュを保持する必要があります。）
ただし、破棄した後、このコンポーネントに再度アクセスすると奇妙な結果が生成され、コンポーネントをキャッシュできなくなります。これはバグだと思います。

@wanyaxing私もあなたと同様の問題に遭遇しました。キープアライブを使用してすべてのサブコンポーネントをキャッシュしました。リストページA ---「詳細ページB ---」3レベルページD。先に進むと、すべて開いています。ルートはsessionStorageに保存されます。戻ると、次のルートがsessionStorageにあるかどうかが判断されます。ある場合、現在のインスタンスは破棄されます。
この場合、初めて問題はなく、正常に動作します。2回以上経過すると、Bは複数回キャッシュされ、DからBに戻るたびに、新しいBが生成されます。図に示すように、以前にキャッシュされたBはまだメモリ内にあります。

コアコードは次のとおりです。

@ realfly08この問題を解決するためにPRを送信しようとしましたが、送信に失敗したようです。vueの自動コードレビューに合格する方法がわかりませんでした-。 -https ：

以前はサイト全体のキャッシュの準備もしていましたが、キャッシュ更新の論理的な落とし穴に遭遇しました。
今、私はサイトのキャッシュ全体をあきらめ、キーフォームページのキャッシュのみをオンにして、現在のページデータを保持するかどうかをコードで動的に判断しました。これはこれらの問題の一時的なスキップですが、それでもこれを感じていますロジックは十分ではありません。

@wanyaxing同様の問題が発生しました。実装する論理関数はA-> B-> C 3ページです。キャッシュは戻るときに使用され、再度入力すると再レンダリングされます。現在、各ページは存続しています。 、次にページBで判断します。前のページに戻る場合（-1に進む）、非アクティブ化された現在のコンポーネントを破棄し、$ destroyを呼び出します。ページCに順番に入るときは、ページBに戻ります。 、Bページが再作成されていることがわかります。同時にキャッシュにBページがあります。

https://www.jianshu.com/p/cd1baf5b03b0
これをまとめました

@fadexiii keep-alive router-viewでの使用方法は？

  <keep-alive :include="includes">
     <router-view></router-view>
  </keep-alive>

includeは、ルーティング構成に名前を書き込みます： 'login'

const router = new Router({
  routes: [
    {
      path: '/login',
      name: 'login',
      component: Login
    }]
 })

空の文字列にインクルードを割り当てても、キャッシュできるのはなぜですか？私の要件は、キャッシュされたルートを手動で破棄することです

コンポーネントが破棄された後、キャッシュは空になりません。問題はここにあると思います。
プロジェクトの担当者は、インクルードなどの属性を処理に使用することを推奨しています。直接破壊されることはないと思います。メモリを改善できます。

@wanyaxingは、送信したPRを読み取ります。有効であるか、キャッシュ削除APIを開きますか？

@ leixu2txtekそのPRを諦めました。キャッシュを強制的にクリアすることで、変装したキャッシュコンポーネントを動的に削除する機能を実現しました。

現在、サイト全体でキャッシュを使用しており、ページを離れるルーティングイベントをインターセプトすることで、ビジネスロジックに基づいてキャッシュを削除する機能を実装しています。次のコードスニペットは参照用です。

• router-viewをキープアライブにすると、サイト全体がデフォルトでキャッシュを使用します。
  <keep-alive><router-view class="transit-view"></router-view></keep-alive>
• ルート内のすべてのページを階層化しました。たとえば、meta.rankはページレベルを表します。たとえば、1.5> 2.5> 3.5は、最初のレイヤーから3番目のレイヤーに2番目のレイヤーを入力することを意味します。

routes: [
{   path: '/', redirect:'/yingshou', },
{   path: '/yingshou',                meta:{rank:1.5,isShowFooter:true},          },
{   path: '/contract_list',           meta:{rank:1.5,isShowFooter:true},          },
{   path: '/customer',                meta:{rank:1.5,isShowFooter:true},          },
{   path: '/wode',                    meta:{rank:1.5,isShowFooter:true},          },
{   path: '/yingfu',                  meta:{rank:1.5,isShowFooter:true},          },
{   path: '/yingfu/pact_list',        meta:{rank:2.5},                            },
{   path: '/yingfu/pact_detail',      meta:{rank:3.5},                            },
{   path: '/yingfu/expend_view',      meta:{rank:4.5},                            },
{   path: '/yingfu/jizhichu',         meta:{rank:5.5},                            },
{   path: '/yingfu/select_pact',      meta:{rank:6.5},                            },
{   path: '/yingfu/jiyingfu',         meta:{rank:7.5},                            },
]

• すべてのページがキャッシュされるため、基本的な考え方は[キャッシュはいつ破棄されますか？ ]。私の設計では、同じレベルの次のページに切り替えるときに現在のページキャッシュが保持され、[前のページに戻ると現在のページキャッシュが破棄されます]。
• そのため、main.jsでは、Vue.mixinメソッドを使用してルート離脱イベントをインターセプトし、インターセプトメソッドでページキャッシュを破棄する機能を実装しました。コアコードは次のとおりです。

Vue.mixin({
    beforeRouteLeave:function(to, from, next){
        if (from && from.meta.rank && to.meta.rank && from.meta.rank>to.meta.rank)
        {//如果返回上一层，则摧毁本层缓存。
            if (this.$vnode && this.$vnode.data.keepAlive)
            {
                if (this.$vnode.parent && this.$vnode.parent.componentInstance && this.$vnode.parent.componentInstance.cache)
                {
                    if (this.$vnode.componentOptions)
                    {
                        var key = this.$vnode.key == null
                                    ? this.$vnode.componentOptions.Ctor.cid + (this.$vnode.componentOptions.tag ? `::${this.$vnode.componentOptions.tag}` : '')
                                    : this.$vnode.key;
                        var cache = this.$vnode.parent.componentInstance.cache;
                        var keys  = this.$vnode.parent.componentInstance.keys;
                        if (cache[key])
                        {
                            if (keys.length) {
                                var index = keys.indexOf(key);
                                if (index > -1) {
                                    keys.splice(index, 1);
                                }
                            }
                            delete cache[key];
                        }
                    }
                }
            }
            this.$destroy();
        }
        next();
    },
});

概要：実際、ページコンポーネントが配置されている上位レベルのkeepAliveコンポーネントを介して、オブジェクトのキャッシュリストが激しく操作されます。 。 。

シンプルでわかりやすいですが、あまりエレガントではありませんが、使いやすいです、ハハ:)

もちろん、公式のサポートAPIがもっと良くなることを願っています。

@wanyaxingルーティングを介してページのキャッシュを制御します

たとえば、/ execute /と彼の子ルート/ executed / chart /があります。また、mixinメソッドを使用してハッキングし、ルートが離れるときにキャッシュする必要のないコンポーネントを破棄します。サブセットの親。親はキャッシュされ、他の条件は破棄されるため、属性を追加せずにルーティングを制御するだけで済みます。私は怠惰です。

// 支持页面保持
Vue.mixin({
  beforeRouteLeave(to, from, next) {

    if (!to.path.startsWith(from.path)) this.$destroy();

    next();

  }
});

@wanyaxingに感謝します、あなたのコードは私にとって非常に役に立ちます。参照させてください

キャッシュが破壊されていないことがわかりました。@LinusBorgとのコミュニケーションに最善を尽くしてください

@wanyaxing私はキャッシュを取得する方法を探していましたが、vueのコアコードに精通していません、あなたのコードはより便利です、私はテストに合格しました、非常に良いです、一時的にこれを行います、私は当局がこの問題を解決できることを願っています、たくさんの情報をチェックした人は少ないのかと聞いたら、こういう問題があるのか

ハハ。
これに基づいて、 @ leixu2txtekは、 https：//github.com/wanyaxing/vue-router-thenと組み合わせたプラグインをお勧めします。そうすると、効果が向上します。
vue-router-thenを使用して現在のページのサブページを開くと、現在のページのサブページの情報またはイベントを取得できます。
this.$routerThen.push('/chose').then(vm => {})

たとえば、注文ページに入力するときに最も一般的に使用される例を示すには、選択するために住所リストを開く必要があります。

<input v-model="price" v-model-link="'/select_address'" />

次に、/ select_addressによって開かれたルートで、アドレスを選択した後、入力イベントをトリガーして、ページに戻ります。

<script>
methods:{
    clickSomeOne:function(value){
        this.$emit('input',value);
        this.$router.go(-1);
    },
}
</script>

これには、上記のキャッシュ戦略に基づく親と子のルーティング間の直接の相互作用が必要ですが、実装後は非常に興味深いものになります。開発のアイデアは非常に直感的です。一時データをvuexに保存することを検討する必要はありません。 、ページを開いてデータを取得するだけです。

@fadexiiiルーターを使用している場合、ルーターに対応するコンポーネントに名前を含める必要があるということですか？
---- router.js ----

import ComponentA from 'views/a
export default [
  {path: 'a', component: ComponentA, name: a}
]

----ビュー/a.vue----

export default {
  name: 'xxxa'
}

何をインクルードに保存する必要があるのは、ComponentAまたはaまたはxxxaですか？

@yiwuyu xxxa

@jkzing同じコンポーネントを2回ロードした場合、一方をキャッシュする必要があり、もう一方をキャッシュする必要がない場合はどうなりますか？コンポーネント名は同じです。

私もこの問題に遭遇しました。追加
メタ：{
keepAlive：true //キャッシュする必要があります
}
[閉じる]をクリックするとfalseに設定されます
次に、リスナーをtrueに変更します
詳細については、 https：//mp.csdn.net/postedit/82628953を参照してください。テストは問題ありません。後で問題が発生するかどうかはわかりません。

タブを切り替えると、キャッシュが閉じられてキャッシュが破棄され、次に開いて複数のネストされたサブルーティングページが再ロードされたときに、同じことが当てはまります。

実際、フォーラムでこの質問に一度答える前に、 keep-alive of includeまたはexcludeを使用して行うことができます。

簡単な例を書くには：
https://jsfiddle.net/jingkaizhao/m5tLg7wt/2/

私はこの例を理解しています。ここで神々に聞きたいです。私のビジネスはこんな感じです。左側は縦型のタブです。このタブはユーザーが動的に追加または削除できます。いずれかのタブをクリックすると、右側に対応するタブが表示されます。このタブ。ツリーは実際には同じツリーですが、ツリーによって選択されるノードは異なります。最初のアイデアは、タブアイテムを追加し、右側にツリーを追加することです。タブを切り替えると、ツリーは非表示になり、それに応じて表示されます（v-show）が、タブが多いと、ツリーがたくさんなります。右側にあり、domノードが多すぎます。表示を非表示にしてv-ifを使用する必要がない場合、保存できないツリー状態（選択、展開、スクロール）があるので、後で考えました。状態を保存できるkeep-aliveの。しかし、私はvueの単一ファイルコンポーネントです。タブはメインページにあります。ツリーはインポートされるコンポーネントです。インポートが行われると、componentsプロパティに直接登録されます。複数の名前を作成するにはどうすればよいですか。あなたが投稿したような木??しかし、実際には、私は単なるコンポーネントです。左側のタブに関連付けるためだけに名前を作成しました。より正確には、左側のタブアイテムを削除するには、キープアライブでこのタブアイテムに対応するツリーバッファーも削除しますか？しかし、私たちは何をすべきでしょうか？

@ leixu2txtekそのPRを諦めました。キャッシュを強制的にクリアすることで、変装したキャッシュコンポーネントを動的に削除する機能を実現しました。

現在、サイト全体でキャッシュを使用しており、ページを離れるルーティングイベントをインターセプトすることで、ビジネスロジックに基づいてキャッシュを削除する機能を実装しています。次のコードスニペットは参照用です。

• router-viewをキープアライブにすると、サイト全体がデフォルトでキャッシュを使用します。
  <keep-alive><router-view class="transit-view"></router-view></keep-alive>
• ルート内のすべてのページを階層化しました。たとえば、meta.rankはページレベルを表します。たとえば、1.5> 2.5> 3.5は、最初のレイヤーから3番目のレイヤーに2番目のレイヤーを入力することを意味します。

routes: [
{   path: '/', redirect:'/yingshou', },
{   path: '/yingshou',                meta:{rank:1.5,isShowFooter:true},          },
{   path: '/contract_list',           meta:{rank:1.5,isShowFooter:true},          },
{   path: '/customer',                meta:{rank:1.5,isShowFooter:true},          },
{   path: '/wode',                    meta:{rank:1.5,isShowFooter:true},          },
{   path: '/yingfu',                  meta:{rank:1.5,isShowFooter:true},          },
{   path: '/yingfu/pact_list',        meta:{rank:2.5},                            },
{   path: '/yingfu/pact_detail',      meta:{rank:3.5},                            },
{   path: '/yingfu/expend_view',      meta:{rank:4.5},                            },
{   path: '/yingfu/jizhichu',         meta:{rank:5.5},                            },
{   path: '/yingfu/select_pact',      meta:{rank:6.5},                            },
{   path: '/yingfu/jiyingfu',         meta:{rank:7.5},                            },
]

• すべてのページがキャッシュされるため、基本的な考え方は[キャッシュはいつ破棄されますか？ ]。私の設計では、同じレベルの次のページに切り替えるときに現在のページキャッシュが保持され、[前のページに戻ると現在のページキャッシュが破棄されます]。
• そのため、main.jsでは、Vue.mixinメソッドを使用してルート離脱イベントをインターセプトし、インターセプトメソッドでページキャッシュを破棄する機能を実装しました。コアコードは次のとおりです。

Vue.mixin({
    beforeRouteLeave:function(to, from, next){
        if (from && from.meta.rank && to.meta.rank && from.meta.rank>to.meta.rank)
        {//如果返回上一层，则摧毁本层缓存。
            if (this.$vnode && this.$vnode.data.keepAlive)
            {
                if (this.$vnode.parent && this.$vnode.parent.componentInstance && this.$vnode.parent.componentInstance.cache)
                {
                    if (this.$vnode.componentOptions)
                    {
                        var key = this.$vnode.key == null
                                    ? this.$vnode.componentOptions.Ctor.cid + (this.$vnode.componentOptions.tag ? `::${this.$vnode.componentOptions.tag}` : '')
                                    : this.$vnode.key;
                        var cache = this.$vnode.parent.componentInstance.cache;
                        var keys  = this.$vnode.parent.componentInstance.keys;
                        if (cache[key])
                        {
                            if (keys.length) {
                                var index = keys.indexOf(key);
                                if (index > -1) {
                                    keys.splice(index, 1);
                                }
                            }
                            delete cache[key];
                        }
                    }
                }
            }
            this.$destroy();
        }
        next();
    },
});

概要：実際、ページコンポーネントが配置されている上位レベルのkeepAliveコンポーネントを介して、オブジェクトのキャッシュリストが激しく操作されます。 。 。

シンプルでわかりやすいですが、あまりエレガントではありませんが、使いやすいです、ハハ:)

もちろん、公式のサポートAPIがもっと良くなることを願っています。

ただし、この方法ではメモリは解放されません。キープアライブをオフにすると問題ありません。キープアライブを追加してから手動でキャッシュを削除し、メモリを破棄することはまだ増えています。この点に注意を払ったのではないでしょうか。

@Liudapengこれまで、メモリ使用量を注意深く調査したことはありませんでした。大まかなテストを行い、メモリグラフのタイムラインでメモリの低下を確認した後、注意深く調査しませんでした。

最近少し忙しいです。2日前にあなたのメッセージを見ましたが、返信する時間がありませんでした。

私はちょうど別のテストを行い、ページの5つまたは6つのレベルに深く入り、ホームページに戻るために数回繰り返しました。メモリタイムラインの結果は次のとおりです。

• キープアライブをオンにして、コンポーネントを動的に破棄します（つまり、上記の方法を使用します）。
  >タイムラインでメモリの低下がはっきりとわかります。メモリが破壊されていると思います。
  

キープアライブを使用しないでください。

キープアライブがないため、メモリスタックはそれほど高速ではありませんが、それでもどんどん高くなっています（コードが急いで変更され、他の場所でメモリリークが発生している可能性があります）

ただし、一般的に、動的破棄を使用した後でも、メモリ使用量は許容範囲内にあると思います。したがって、メモリが大幅に増加した場合は、コンポーネントが破棄されたときにバインディングイベントが破棄されないかどうかを確認する必要があります（コンポーネントはkeepAliveのキャッシュ配列から削除され、メモリから破棄されません）。

再度確認してください。

@wanyaxing私は私のプロジェクトで同じ問題を抱えていますが、生き続けることはできません：

動的コンポーネントの$ destory（）を呼び出すと機能せず、ノードの数が増えるとJSヒープが高くなることがわかりました。動的コンポーネントはDOMを破棄せずに作成したようです。

@bigggge nameはコンポーネント内の属性であり、ルートの属性ではありません

私の質問はさらに奇妙です。私のvueバージョンは2.3.3です。ページAには、次のページをロードするためのスクロール用のコードがあります。ページAからページBに切り替えました。ページBをスクロールすると、ページAの次のページをロードするためのコードがまだ実行されます。グローバルキープアライブを削除しても、上記の問題は発生しません。しかし、アクティブ化されたものはすべて再び無効になります。createdを使用する必要があります。

私の質問はさらに奇妙です。私のvueバージョンは2.3.3です。ページAには、次のページをロードするためのスクロール用のコードがあります。ページAからページBに切り替えました。ページBをスクロールすると、ページAの次のページをロードするためのコードがまだ実行されます。グローバルキープアライブを削除しても、上記の問題は発生しません。しかし、アクティブ化されたものはすべて再び無効になります。createdを使用する必要があります。

グローバルモニタリングが原因である可能性があります。スクロール時に現在のルートであるかどうかを判断し、次のページをロードするかどうかを決定できます。

私の質問はさらに奇妙です。私のvueバージョンは2.3.3です。ページAには、次のページをロードするためのスクロール用のコードがあります。ページAからページBに切り替えました。ページBをスクロールすると、ページAの次のページをロードするためのコードがまだ実行されます。グローバルキープアライブを削除しても、上記の問題は発生しません。しかし、アクティブ化されたものはすべて再び無効になります。createdを使用する必要があります。

グローバルモニタリングが原因である可能性があります。スクロール時に現在のルートであるかどうかを判断し、次のページをロードするかどうかを決定できます。

はい、vue-infinite-scrollプラグインを使用しています。グローバルキープアライブを使用しても、モニタリングイベントは削除されません。このプラグインを書き直しました。

@wanyaxingのスクリプトを使用して、キャッシュをクリアする機能を実現しました。レコードジャンプのキューを使用すると、更新ではなくロールバックの要件を処理する方が簡単です。スクリプトは整理され、要点を説明します
https://gist.github.com/lingceng/c204bac2704d03db99932d5457e662e6

@jkzing同じコンポーネントを2回ロードした場合、一方をキャッシュする必要があり、もう一方をキャッシュする必要がない場合はどうなりますか？コンポーネント名は同じです。

この質問もあります。インクルードはこの要件を満たすことができません。複数のルーティングページが1つのコンポーネントに対応している場合、コンポーネント名は1つだけです。どうすればよいですか。

タブを切り替えると、キャッシュが閉じられてキャッシュが破棄され、次に開いて複数のネストされたサブルーティングページが再ロードされたときに、同じことが当てはまります。

@ heng1234こんにちは、この問題を解決しましたか？ガイダンスのために連絡先情報を残すことができるのは誰ですか？

ルーティングによってページを切り替えたり、コンポーネントによって切り替えたりしないでください
https://blog.csdn.net/qq_39313596/article/details/82628953

[email protected]

差出人：Codezero123
送信時間：2019-12-03 10:04
受信者：vuejs / vue
Cc：hlvy;言及
件名：Re：[vuejs / vue] keep-aliveによって、キャッシュされたコンポーネントを動的に削除する機能が向上することを願っています（＃6509）
タブを切り替えると、キャッシュが閉じられてキャッシュが破棄され、次に開いて複数のネストされたサブルーティングページが再ロードされたときに、同じことが当てはまります。
@ heng1234こんにちは、この
あなたが言及されたのであなたはこれを受け取っています。
このメールに直接返信するか、GitHubで表示するか、登録を解除してください。

@wanyaxingは、3レベルルーティングキャッシュには効果的ではありません。たとえば、vue-element-adminで、複数の3レベルタグタグが有効になっている場合、
ルーティング。
{ path: '/nested', component: Layout, redirect: '/nested/menu1/menu1-1', name: 'Nested', meta: { title: 'Nested Routes', icon: 'nested' }, children: [ { path: 'menu1', component: () => import('@/views/nested/menu1/index'), // Parent router-view name: 'Menu1', meta: { title: 'Menu 1' }, redirect: '/nested/menu1/menu1-1', children: [ { path: 'menu1-0', component: () => import('@/views/nested/menu1/menu1-0'), name: 'Menu1-0', meta: { title: 'Menu 1-0', noCache: true } }, { path: 'menu1-1', component: () => import('@/views/nested/menu1/menu1-1'), name: 'Menu1-1', meta: { title: 'Menu 1-1' } }, { path: 'menu1-2', component: () => import('@/views/nested/menu1/menu1-2'), name: 'Menu1-2', redirect: '/nested/menu1/menu1-2/menu1-2-1', meta: { title: 'Menu 1-2' }, children: [ { path: 'menu1-2-1', component: () => import('@/views/nested/menu1/menu1-2/menu1-2-1'), name: 'Menu1-2-1', meta: { title: 'Menu 1-2-1' } }, { path: 'menu1-2-2', component: () => import('@/views/nested/menu1/menu1-2/menu1-2-2'), name: 'Menu1-2-2', meta: { title: 'Menu 1-2-2' } } ] }, { path: 'menu1-3', component: () => import('@/views/nested/menu1/menu1-3'), name: 'Menu1-3', meta: { title: 'Menu 1-3' } } ] } ] }

`Vue.mixin（{
beforeR outeLeave：function （to、from、next）{
if（from.meta.noCache）{
if（this。$ vnode && this。$ vnode.data.keepAlive）{
if（this。$ vnode.parent && this。$ vnode.parent.componentInstance && this。$ vnode.parent.componentInstance.cache）{

      if (this.$vnode.componentOptions) {
        var key = this.$vnode.key == null
          ? this.$vnode.componentOptions.Ctor.cid + (this.$vnode.componentOptions.tag ? `::${this.$vnode.componentOptions.tag}` : '')
          : this.$vnode.key;
        var cache = this.$vnode.parent.componentInstance.cache;
        var keys = this.$vnode.parent.componentInstance.keys;
        if (cache[key]) {
          if (keys.length) {
            var index = keys.indexOf(key);
            if (index > -1) {
              keys.splice(index, 1);
            }
          }
          delete cache[key];
        }
      }
    }
    this.$destroy();
  }
}
next();

}、
}）; `

アイデアはこの種のアイデアです。アイデアに問題はありません。キャッシュをいつ呼び出して破棄するかは、ビジネスの特定の実装によって異なります。

私たちのビジネス側のこの種のシナリオは、まさにシナリオである必要があります。
1.いくつかのページを閲覧しましたが、キャッシュする必要があります
2.クリックして終了します。すべてのキャッシュをクリアする必要があります
3.ログイン後に他のエラーリダイレクトプロンプトがあり、これらのページはキャッシュされません
4.ログインは成功し、新しいページは引き続きキャッシュされます

2に達したときにすべてのキャッシュをクリアすることは不可能であることがわかりました。keep-aliveの最大値をvuexに入れて、1に設定することはまだ無効です。これは、vue開発ツールによってはまだキャッシュされたページがあります。
私にとってさらに奇妙なのは、3で他の非ログインページにジャンプすると、1でキャッシュされたページのマウントがトリガーされ、開発者ツールを見ると、これらのページはすべて非アクティブです。これにより、ページロジックが異なります。種類問題の。
長い間探していたのに、理由がわかりません

私たちのビジネス側のこの種のシナリオは、まさにシナリオである必要があります。
1.いくつかのページを閲覧しましたが、キャッシュする必要があります
2.クリックして終了します。すべてのキャッシュをクリアする必要があります
3.ログイン後に他のエラーリダイレクトプロンプトがあり、これらのページはキャッシュされません
4.ログインは成功し、新しいページは引き続きキャッシュされます

2に達したときにすべてのキャッシュをクリアすることは不可能であることがわかりました。keep-aliveの最大値をvuexに入れて、1に設定することはまだ無効です。これは、vue開発ツールによってはまだキャッシュされたページがあります。
私にとってさらに奇妙なのは、3で他の非ログインページにジャンプすると、1でキャッシュされたページのマウントがトリガーされ、開発者ツールを見ると、これらのページはすべて非アクティブです。これにより、ページロジックが異なります。種類問題の。
長い間探していたのに、理由がわかりません

シナリオでは、2の時点で、ページを直接更新することを検討する必要があります。これは、最も安全で直接的な解決策です。

includeはコンポーネントの名前に対応しているため、複数のルートが1つのコンポーネントに対応している場合はどうなりますか？同じコンポーネントに別の名前を付ける方法はありますか？