キープアライブデータでVUEは、前後のページをキャッシュし、問題をリフレッシュ

キープアライブ使用法：

1、の定義でキープaliv app.vue

< ルータ・ビューV-IF = "！$ route.meta.keepAlive" > </ ルータビュー> 
< キープアライブ> 
     < ルータ・ビューV-IF = "$ route.meta.keepAlive" > </ router-ビュー> 
</ キープアライブ>

図2に示すように、ルーティングファイルrouter.js、メタ情報を定義

{ 
  パス： '/ space4' 、
  名前： 'space4' 、
  コンポーネント：（） =>インポート（ './components/workspace/space4.vue' ）、
  メタ：{ 
    isUseCache：falseに、// デフォルトはキャッシュしませ 
    キープアライブを：trueに、
  } 
}

3、アクティブにフック一覧ページ

有効（）{
     IF（！これ。route.meta.isUseCache $）{ // isUseCacheは、ルータ、解釈キャッシュするかどうかをするときのメタ情報を追加し
      、この .contactList = [] // 元のデータ消去
      この（.contactDisplayを）// リロード
    } 
  }、
  メソッド：{ 
    onClickLeft（）{ 
      この。$のrouter.go（-1 ）
    }、
    contactDisplay（）{ 
      これは JSON.parse =（sessionStorage.getItem（ '連絡先-項目'を.contactListGet ））
      LET個人 = これは.contactListGet 
      私はLET = 0を
       するために（I 中パーソナル）{
         // 姓を聞かせ=パーソナル[i]は）0,1（.substring 
        姓=パーソナル[I] .substring（パーソナル[I] .LENGTH-2せ）
         、この .contactList.push（{ '姓' ：姓、名前：個人的な[I]}）
      } 
      はconsole.log（ 'contactList'、この.contactList）
    } 
  }

4、詳細ページbeforeRouteLeaveフック関数

beforeRouteLeave（次に、からに）{
     // リストページが詳細ページにジャンプしたときに、キャッシュに設定する必要がある
    IF（to.name == 'をspaceContact' ）{ 
      from.meta.isUseCache = trueに
    } 
    次に（）
  }

 

VUEフック関数：

キープアライブキャッシュコンポーネントを設定します。      

　   第一次进入：beforeRouterEnter - > created-> ... - > activated-> ... - >無効        

　　入力に続い：beforeRouterEnter - > activated->無効化、コンポーネントにのみ最初の時間を見ることができ、作成したフックが行く、そしてどのようなコンポーネントをキャッシュすることはフック関数に行くたびに起動されます。そこで、我々はこの判決ではフックの内側に移動する必要があり、現在のコンポーネントは、キャッシュされたデータを使用したり、データ収集をリフレッシュするために必要とされます。

[記事を参照してください]