vue-router 時のキープアライブ ページ キャッシュの問題を解決する
keep-alive を使用して動的コンポーネントをラップすると、非アクティブなコンポーネントのインスタンスは破棄されずにキャッシュされます。keep-alive は抽象コンポーネントです。DOM 要素自体をレンダリングしたり、親コンポーネントのチェーンに現れたりすることはありません。コンポーネントがキープアライブ内で切り替えられると、そのアクティブ化および非アクティブ化されたライフサイクル フック関数がそれに応じて実行されます。
機能: コンポーネントの切り替え中に状態をメモリに保持し、DOM の繰り返しレンダリングを防ぎ、読み込み時間とパフォーマンスの消費を削減し、ユーザー エクスペリエンスを向上させます。
原則: 作成した関数が呼び出されたときに、キャッシュする必要がある VNode ノードを this.cache に保存し、レンダリング (ページ レンダリング) 時に、VNode の名前がキャッシュ条件 (包含と除外で制御可能) を満たしている場合、 this.cache から取得されます。以前にキャッシュされた VNode インスタンスをレンダリングのために取り出します。
日々の開発では、特に電子商取引プロジェクトの場合、製品リストの一部の状態をキャッシュする必要があるページ キャッシュに遭遇することがあります。
以下に、vue ルート キャッシュのいくつかの方法を簡単に紹介します。
すべてをキャッシュする
すべてのページをキャッシュするには、keep-aliveタグをタグで直接ラップします。router-view
<keep-alive>
<router-view></router-view>
</keep-alive>
指定された単一のルートをキャッシュする
keep-aliveまた、タグを タグ で直接ラップしrouter-view、include キャッシュする必要があるページの名前を使用します。
を使用して v-bind名前配列をバインドしたり、「,」を使用して区切ったり、正規表現を使用したりできます。複数の場合には、3 番目のものを使用することをお勧めします。
注意：是缓存页面的 name 名称，而不是缓存页面路由的 name 名称
<keep-alive include="该路由的name名称">
<router-view></router-view>
</keep-alive>
<!-- 逗号分隔字符串 -->
<keep-alive include="a,b">
<component :is="view"></component>
</keep-alive>
指定した複数のルートをキャッシュする
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
キャッシュと非キャッシュのそれぞれのルート出口として2 つのタグを使用しますrouter-view。ルートを構成するときに必要なのは、meta キャッシュされるページに属性を追加し、keepAlive追加された属性を true に設定することだけです。例えば：
{
path:'/test',
name:'Test',
component: Test,
meta: {
keepAlive: true} //true缓存 false不缓存
}
アクティブ化および非アクティブ化
activated、deactivated これら 2 つのライフサイクル関数は、keep-aliveコンポーネントの使用後に使用可能になる必要があります。そうでない場合、これらの関数は存在しません。
導入されるとkeep-alive、ページは最初に
フックのトリガー シーケンスに入りcreated-> mounted -> activated、終了時に起動されますdeactivated。
再入力時（前進または後退）はトリガーのみactivated
注意：keep-alive里面紧跟包裹 router-view 组件，而不能出现其他标签，不然会导致无法缓存页面。
