記事のディレクトリ
<---------------------------------分割ふり-------------- ------------------->
キープアライブページのキャッシュの問題に戻り、ページを更新しません
次のページにジャンプする時に選出されたコンポーネントであり、そのような機能ブロック、
ページが保存されていない場合に返す前の状態
復帰後:
ソリューション
<keep-alive>
小包のダイナミックコンポーネントは、コンポーネントのインスタンスは、それらを破壊するのではなく、非アクティブにキャッシュされます。そして、<transition>
類似した、<keep-alive>
抽象コンポーネントです:それ自体がDOM要素をレンダリングしていない、それは親コンポーネントのチェーンに表示されません。
アセンブリは、場合<keep-alive>
その活性化内切り替え二つフッキング機能ライフサイクルに対応行われる非活性化されます。
- ルーティングの設定
ニーズをルーティングコンポーネントにルーティング素子構成キープアライブプロパティ(ランダムな名前)を追加するキャッシュするには、私がここで設定した真であります
{
path: 'stepStore',
component: stepSecond,
meta: {
keepAlive: 'true'
}
- ルーティングオプション
// keep-alive中为要缓存的 组件
<keep-alive>
// keepAlive 为true走这个
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
// keep 为false 走这个
<router-view v-if="!$route.meta.keepAlive"></router-view>
- ルートガード
を達成するためにメタ内容を変更するには、ルーティングガードを使用して
beforeRouteLeave: (to, from, next) => {
// 如果跳转的页面为/setting/stepStore 就将keepAlive设置为true就走缓存了组件那一步
if (to.path === '/setting/stepStore') {
to.meta.keepAlive = true
} else {
// 否则keepAlive设为 false
to.meta.keepAlive = false
}
next()
}
これは、最初にこのコードでは非常に便利です!