VUEキープアライブが更新されない前後リフレッシュを達成で

キープアライブラベルのリフレッシュが前方後方ないリフレッシュを図る使用

要件：ルートは復帰の操作の前にページを保存し、データを更新することができ進めます。

>変更App.vueルータビューは、変数フィールドに応じてメタ経路決意が示されて設けられているかどうか

<テンプレート> 
  の<divのid = "アプリ"> 
    <キープアライブ> 
      <ルータビューV- 場合 = "$ route.meta.keepAlive"> </ルータビュー> 
    </キープアライブ> 
    <ルータ・ビューV - もし "！$ route.meta.keepAlive" => </ルータビュー> 
  </ div> 
</テンプレート>

>内のルータ/ index.jsでメタフィールドを追加します。

{ 
     パス： '/ PointsList' 、
     名前： 'PointsList' 、
     コンポーネント：（） =>インポート（ '@ /ビュー/ PointsList' ）、
     メタ：{ 
          キープアライブが：trueに、//は、コンポーネントをキャッシュする必要があるか否かを判断 
          isBackを：falseに / / 判断は、操作を返していません
     } 
}

>対応する構成要素に

いいえキャッシュデータは、その後、変数はデータに定義されている場所も決定し、データを取得するためにページをリロードする必要が手動でリフレッシュした後に戻りません

   データ（）{
      リターン{ 
       isFirstEnter：falseに // 変数の定義最初のエントリかどうかを決定するために、falseにデフォルト
     }; 
   }

isFirstEnterがtrueになるで作成し、説明を入力またはページを更新した最初の

作成（）{
      この .isFirstEnter = trueに;
      // 最初の入力後またはページを更新し、この関数フック実行する
     // キープアライブフック関数に使用して（2+回）実行されません 
 }

判断が終わったからbeforeRouteEnterページ

beforeRouteEnter {（次に、から、まで）
     のIF（from.name ==「ページ」）{
       // これは、ルート名のページ名です 
      to.meta.isBack = 真 ; // あなたが返されることをtrueに設定ページにはなく、他のページからページへのジャンプ入力し
    } 
    次へ（）; 
  }

活性化された実行データを取得する方法

このページをキャッシュする必要があるため。最初に作成され、マウントされた実行方法のエントリは、再エントリーが実行されません。あなたが入力したアクティブにするたびに、このフック関数で取得したデータを実行しています

   有効（）{
      IF（！これ。|| $ route.meta.isBack この.isFirstEnter）{
          // isBackがfalseの場合、必要性が、新しいデータを取得し、それ以外の場合は、もはや要求、直接使用がキャッシュされますデータ
         // もしisFirstEnterこのページを更新するページまたはユーザーを入力するのは初めてであることを示し、新しいデータを取得する必要があり、真である
         このの.strは=「」// データを消去するには、避けることはほとんどすることができ、ユーザーは、前にキャッシュされたデータを見ることができます
         この）（.getData。
     } 
     // データを取得することはできません次につながる、isBackは本当でし避けるため、偽をデフォルトに戻す
     この。$ route.meta.isBack = falseを
     //のすべての買収の結果、isBackは本当でし避けるため、元に戻すにはfalseをデフォルトに新しいデータ
     この .isFirstEnter = falseに; 
 
   }

VUEキープアライブが更新されない前後リフレッシュを達成で

おすすめ