vue 的keep-alive緩存功能的實現(xiàn)
更新時間：2018年03月22日 13:47:31 作者：Js_Mei
本篇文章主要介紹了vue 的keep-alive緩存功能的實現(xiàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
Vue 實現(xiàn)組件信息的緩存
當(dāng)我們在開發(fā)vue的項目過程中，避免不了在路由切換到其他的component再返回后該組件數(shù)據(jù)會重新加載，處理這種情況我們就需要用到keep-alive來緩存vue的組件信息，使其不再重新加載。
一、在app.vue里
<keep-alive> <router-view></router-view> </keep-alive>
但是這種情況會對所有的組件進行緩存，不能達到單個組件緩存的效果。
那么我們給部分組件加上，實現(xiàn)方法如下：
在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的
}
這就實現(xiàn)了部分組件的緩存功能
如果緩存的組件想要清空數(shù)據(jù)或者執(zhí)行初始化方法，在加載組件的時候調(diào)用activated鉤子函數(shù)，如下：
activated: function () {
this.data = ‘'
}
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue3中動態(tài)修改樣式與級聯(lián)樣式優(yōu)先順序圖文詳解
在項目中,我們時常會遇到動態(tài)的去綁定操作切換不同的CSS樣式,下面這篇文章主要給大家介紹了關(guān)于Vue3中動態(tài)修改樣式與級聯(lián)樣式優(yōu)先順序的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-04-04
Vue3+Hooks實現(xiàn)4位隨機數(shù)和60秒倒計時的示例代碼
Vue3的Hooks是一種新的 API,本文主要介紹了Vue3+Hooks實現(xiàn)4位隨機數(shù)和60秒倒計時的示例代碼,具有一定的參考價值,感興趣的可以了解一下2024-04-04
vue+element樹組件 實現(xiàn)樹懶加載的過程詳解
這篇文章主要介紹了vue+element樹組件 實現(xiàn)樹懶加載的過程，本文通過圖文實例代碼相結(jié)合給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-10-10
Vue使用Proxy監(jiān)聽所有接口狀態(tài)的方法實現(xiàn)
這篇文章主要介紹了Vue使用Proxy監(jiān)聽所有接口狀態(tài)的方法實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
elementPlus?的el-select在提示框關(guān)閉時自動彈出的問題解決
這篇文章主要介紹了elementPlus?的el-select在提示框關(guān)閉時自動彈出閉時自動彈出的問題,主要問題就是因為filterable屬性,根本解決方案是選中的時候讓他失去焦點?el-select有一個visible-change事件,下拉框出現(xiàn)/隱藏時觸發(fā),感興趣的朋友跟隨小編一起看看吧2024-01-01
這篇文章主要介紹了Vue一個案例引發(fā)的遞歸組件的使用，本文主要給大家展示如何在項目中使用遞歸組件，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2018-11-11
vue?大文件分片上傳(斷點續(xù)傳、并發(fā)上傳、秒傳)
本文主要介紹了vue?大文件分片上傳，主要包括斷點續(xù)傳、并發(fā)上傳、秒傳，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
路由守衛(wèi)又稱導(dǎo)航守衛(wèi)，指是路由跳轉(zhuǎn)前、中、后過程中的一些鉤子函數(shù),這篇文章主要介紹了Vue中的路由與多種守衛(wèi),需要的朋友可以參考下2023-02-02
這篇文章主要為大家詳細介紹了vue實現(xiàn)折線圖，可按時間查詢，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-08-08
vue中動態(tài)出來返回的時間秒數(shù)(在多少秒顯示分、小時等等)
這篇文章主要給大家介紹了關(guān)于vue中動態(tài)出來返回的時間秒數(shù)(在多少秒顯示分、小時等等)的相關(guān)資料,文中通過代碼示例介紹的非常詳細,對大家學(xué)習(xí)或者工作具有一定的參考借鑒價值,需要的朋友可以參考下2024-01-01