Vue 2.0はページキャッシュとキャッシュしない方式を実現する。


1、アプリにキャッシュが必要なdivを設定する

<keep-alive>//     
  <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>//      
2、ルートrouter.jsに設定します。vueページはキャッシュが必要ですか?

{
  path: '/home',
  component: home,
  meta: { keepAlive: true },//   .vue      
},
{
  path: '/notice',
  component: notice,//         
}
3、キャッシュページからキャッシュされていないページにジャンプしたり、キャッシュページからキャッシュページにジャンプしてみたりすると、ウオッチはルートを傍受できないことが分かります。キャッシュとキャッシュされていないページはそれぞれ異なるdivの中にあります。一つのdivの中では他のdivのルートを傍受することは不可能です。すべての傍受ルートにキャッシュ(ルート追加meta:{keep Alive:true})を追加して、キャッシュページ間でルーティングがジャンプしている場合は、ルートを傍受してデータの更新が必要かどうかを判断することができます。
vue keep-aliveキャッシュ後、キャッシュページに入るには、再度更新が必要です。

beforeRouteEnter (to, from, next) {
 next (vm => {
   vm.getData()
 })
},
 mounted: function () {
  this.getData()
}
keep-aliveデータ更新問題
プロジェクトの中でを使ってを含んでページのキャッシュを実現して、ページのロードを加速します。
また、この方法はいくつかの弊害をもたらします。次のように説明してください。
******************************************************************
keep-aliveを導入すると、ページが初めて入って、フックのトリガ順序created->mounted->activatedが終了すると、deactivatedがトリガされます。
再度(前進または後退)に入ると、activatedだけがトリガされます。
******************************************************************
これは問題をもたらします。以前はプロジェクトでmountedを使ってページローディング時にデータを取得していましたが、「keep-alive」を使ってからは有効になりません。
上記の説明により、mountedをactivatedに置き換えれば良いです。
以上のVue 2.0はページキャッシュとキャッシュしない方式を実現しました。つまり、小編集は皆さんに全部の内容を共有しました。参考にしていただければと思います。よろしくお願いします。