VUEは、単一ページ使用のキープアライブページが更新されずに戻るという問題を解決します

シナリオ：A、B、C 3ページ、Aはホームページ、Bはリストページ、Cは詳細ページ

AはBがBページに入るたびに更新され、

CはページBに戻るたびに更新されません。元の位置のままです。

次のコード構成

1.app.vue <keep-alive>はVueの組み込みコンポーネントであり、コンポーネントの切り替えプロセス中に状態をメモリに保持して、DOMの繰り返しレンダリングを防ぐことができます。

    <keep-alive> 
      <router-view v-if = "$ route.meta.keepAlive"> </ router-view> 
    </ keep-alive> 
    <！-キャッシュされたルートに加えて、キャッシュされていないルートを作成します
    - > <router-view v-if = "！$ Route.meta.keepAlive"> </ router-view>の入り口

2.ルーティングが構成されているグローバルキープアライブを構成する

{ 
    パス：" / funGoodsArea " 、
    名称：" funGoodsArea " 、
    成分：（） =>インポート（" ../views/activity/funGoodsArea.vue " ）、
    メタ：{ 
      タイトル：" テキスト" 、
       キープアライブ：真
    } 
  } 、

3. BページでbeforeRouterLeaveを構成します。ここでfunGoodsAreaのルート

  // リストページのメタ値を変更します。falseの場合、ページをもう一度入力すると、データが再度要求されます。
  beforeRouteLeave（to、from 、next）{ 
     from .meta.keepAlive = false ; 
    next（）; 
  }、

4. Cページでも構成 

  //前のページに戻る

beforeRouteLeave（to、from 、next）{
     if（to.path == " / funGoodsArea " ）{ 
      to.meta.keepAlive = true ; 
    } else { 
      to.meta.keepAlive = false ; 
    } 
    next（）; 
  }、

それらの中で  beforeRouterLeave（to、from、next）{}およびメソッドレベル