前のページに戻るVUEは、キープアライブをリフレッシュしません。


<---------------------------------分割ふり-------------- ------------------->

キープアライブページのキャッシュの問題に戻り、ページを更新しません

ここに画像を挿入説明
次のページにジャンプする時に選出されたコンポーネントであり、そのような機能ブロック、
ここに画像を挿入説明
ページが保存されていない場合に返す前の状態
復帰後:ここに画像を挿入説明

ソリューション

<keep-alive> 小包のダイナミックコンポーネントは、コンポーネントのインスタンスは、それらを破壊するのではなく、非アクティブにキャッシュされますそして、<transition>類似した、<keep-alive>抽象コンポーネントです:それ自体がDOM要素をレンダリングしていない、それは親コンポーネントのチェーンに表示されません。

アセンブリは、場合<keep-alive>その活性化内切り替え二つフッキング機能ライフサイクルに対応行われる非活性化されます。

  1. ルーティングの設定

ニーズをルーティングコンポーネントにルーティング素子構成キープアライブプロパティ(ランダムな名前)を追加するキャッシュするには、私がここで設定した真であります

 {
	path: 'stepStore',
    component: stepSecond,
    meta: {
    keepAlive: 'true'
  }
  1. ルーティングオプション
 // 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>
  1. ルートガード
    を達成するためにメタ内容を変更するには、ルーティングガードを使用して
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()
}

これは、最初にこのコードでは非常に便利です!

公開された50元の記事 ウォン称賛23 ビュー1228

おすすめ

転載: blog.csdn.net/qq_44698161/article/details/103290326