示例vue 的keep-alive快取功能的實現
本篇文章主要介紹了vue 的keep-alive快取功能的實現,寫的十分的全面細緻,具有一定的參考價值,對此有需要的朋友可以參考學習下。如有不足之處,歡迎批評指正。
Vue 實現元件資訊的快取
當我們在開發vue的專案過程中,避免不了在路由切換到其他的component再返回後該元件資料會重新載入,處理這種情況我們就需要用到keep-alive來快取vue的元件資訊,使其不再重新載入。
一、在app.vue裡
keep-alive> <router-view></router-view> </keep-alive>
但是這種情況會對所有的元件進行快取,不能達到單個元件快取的效果。
那麼我們給部分元件加上,實現方法如下:
在app.vue
<!--這裡是需要keepalive的--> <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> <keep-alive> <!-- 這裡不會被keepAlive --> <router-view v-if="!$route.meta.keepAlive"></router-view>
二、 在路由的index.js頁面裡
{ path: '', name: '', component: '', meta: {keepAlive: true}// 這個是需要keepalive的 }, { path: '', name: '', component: , meta: {keepAlive: false}// 這是不會被keepalive的 }
這就實現了部分元件的快取功能
如果快取的元件想要清空資料或者執行初始化方法,在載入元件的時候呼叫activated鉤子函式,如下:
activated: function () { this.data = ‘' }
結語
感謝您的觀看,如有不足之處,歡迎批評指正。