はじめに：
最近VUEのプロジェクトがあるページキャッシュの最適化を使用して、単一のページを達成するために、前方のページを更新し、後方のページを更新していない、とページがキャッシュ効果を実装接続する必要があります。
例：ページ、Bページ、Cページ
生き続ける：
キープアライブこのラベルを使用するために必要なキャッシュページをしたいです、
キープAlineのパッケージルータビューページのキャッシュの問題ことができます：
<キープアライブ>
<ルータビュークラス=「ルーター」> </ルータビュー>
</キープアライブ>
いくつかは、彼らがキャッシュする必要はありませんが、すべてのキャッシュされるページの、いくつかの必要性、我々は彼を区別するために何かを見つけるために、この時間を使うべきではありません、
メタ：オリジナルのルーティング情報、
私たちは、キャッシュされていないされ、キャッシュされるものを区別するためにこれを使用します
router.js内の各ルートに追加されます
{
パス： '/ホーム'、
名前： 'ホーム'、
コンポーネント：（）=>
インポート（ '@ /ビュー/ Home.vue'）、
メタ：{
キープアライブが：trueに、このコンポーネントのニーズがキャッシュされる//
}
} 、
{
パス： '/ホーム'、
名前： 'ホーム'、
コンポーネント：（）=>
インポート（ '@ /ビュー/ Home.vue'）、
メタ：{
キープアライブ：falseに、//このコンポーネントの必要性がキャッシュされていません
} 、
}、
app.vueではジェネリックたメタ区別するために
<キープアライブ>
<ルータビュークラス= "ルータ" V-IF = "$ route.meta.keepAlive"> </ルータビュー>
</キープアライブ>
<ルータビュークラス= "ルーター" V-もし= "！$ route.meta.keepAlive"> </ルータビュー>
ダイナミックキャッシュ：
上記のプロセスを行った後、それはキャッシュを実装することが可能であったが、ページが第2の再入国への最初の入り口に複数のエントリポイントを持っている場合、その結果は、データを更新されません、
この時点で、私たちは、リフレッシュのための各ルートに追加することができます。isBackを
{
パス： '/ホーム'、
名前： 'ホーム'、
コンポーネント：（）=>
インポート（ '@ /ビュー/ Home.vue'）、
メタ：{
キープアライブは：trueに、//このコンポーネントのニーズがキャッシュされる
isBack：偽
}
}
使用：beforeRouteEnter、beforeRouteLeave、アクティブ化、
それらが実行される順序：beforeRouteEnter ----> beforeRouteLeave -------->が活性化、
beforeRouteEnterとbeforeRouteLeaveは、各時間が出てトリガする入るナビゲーションフックの内部コンポーネントであります
キープアライブのみいくつかのケースでは下のフックが発生しなかったが、各エントリはアセンブリトリガーする、（アセンブリに初回のみが作成トリガーされます）：有効
例えば、Bのページからページを入力します。
BはないページBに偽である場合（後述するページAである）、実行されず、初期化が行われ、ページBが真= isBackに設定されている場合、しないページと判断初期化コードで活性化されますコード
動的キャッシュのこの実現：
beforeRouteEnter {（から、次へ）
IF（from.name == 'B页面'）{
真to.meta.isBack =。
}
次の（）。
}、
有効（）{
場合（！。この$ route.meta.isBack）{
this.inits（）;
}
。この$ route.meta.isBack = falseを
this.isFirstEnter =偽;
}、
リフレッシュの問題点：
BからCへのIページならば、私はページを更新し、この時間は、すべてのデータは、ページ上で初期化され、その後、私は戻って、ページBへの思い、そして、from.name ==「Cページ」、to.meta。 isBack.isBack =真、
この時間は、それはそれは問題になり、また、初期化されたデータをリロードするが、私の元のデータを求めていないだろう。
解決策：別の引数isFirstEnterを追加=真
{（）を作成
this.isFirstEnter = TRUE。
}、
beforeRouteEnter（、隣からの）{
IF（from.name == 'C页面'）{
to.meta.isBack = TRUE。
}
次の（）。
}、
有効（）{
（！。この$ route.meta.isBack || this.isFirstEnter）であれば{
this.inits（）;
}
。この$ route.meta.isBack = falseを
this.isFirstEnter =偽;
}、
遅いページでも多くのメモリ結果：
ページキャッシュはより多くの、キャッシュ・ページの多くがカードの後に、より多く取得することになるであろう多くのクリック、
ソリューション - - 各リターン・スワップのコンポーネント後に破壊されています。
使用：beforeRouteLeaveがない場合は、次のページに、行くどのページかを決定このページを破壊するには、直接、その後、（それが最後のページとなっている必要があります）
（次の、からの）beforeRouteEnter {
（from.name == '詳細'）{もし
to.meta.isBack = TRUE。
}
次の（）。
}、
beforeRouteLeave {（次の、からの）
{（！to.name = '下个页面'）であれば
、この$（破壊する）。
}
次の（）。
}、
有効（）{
（！。この$ route.meta.isBack || this.isFirstEnter）であれば{
this.inits（）;
}
。この$ route.meta.isBack = falseを
this.isFirstEnter =偽;
}、
前方後方リフレッシュのこの実現には、リフレッシュ機能しないが、私は再びこれらの手順を記述するために、このに各ページを行う必要があり、この感覚が特に良好ではない、大きな神を持っている希望はより良い方法を持つことができ、
参考記事：HTTPS：//www.cnblogs.com/wonyun/p/8763314.html