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