vue 中的keep-alive實(shí)例代碼
Vue 實(shí)現(xiàn)組件信息的緩存
當(dāng)我們?cè)陂_(kāi)發(fā)vue的項(xiàng)目過(guò)程中,避免不了在路由切換到其他的component再返回后該組件數(shù)據(jù)會(huì)重新加載,處理這種情況我們就需要用到keep-alive來(lái)緩存vue的組件信息,使其不再重新加載。
一、在app.vue里
<keep-alive> <router-view></router-view> </keep-alive>
但是這種情況會(huì)對(duì)所有的組件進(jìn)行緩存,不能達(dá)到單個(gè)組件緩存的效果。
那么我們給部分組件加上,實(shí)現(xiàn)方法如下:
在app.vue
<!--這里是需要keepalive的--> <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> <keep-alive> <!-- 這里不會(huì)被keepAlive --> <router-view v-if="!$route.meta.keepAlive"></router-view>
二、 在路由的index.js頁(yè)面里
{ path: '', name: '', component: '', meta: {keepAlive: true} // 這個(gè)是需要keepalive的 }, { path: '', name: '', component: , meta: {keepAlive: false} // 這是不會(huì)被keepalive的 }
這就實(shí)現(xiàn)了部分組件的緩存功能
如果緩存的組件想要清空數(shù)據(jù)或者執(zhí)行初始化方法,在加載組件的時(shí)候調(diào)用activated鉤子函數(shù),如下:
activated: function () { this.data = ‘' }
總結(jié)
以上所述是小編給大家介紹的vue 中的keep-alive實(shí)例代碼,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
- vue 使某個(gè)組件不被 keep-alive 緩存的方法
- 解決vue keep-alive 數(shù)據(jù)更新的問(wèn)題
- vue2使用keep-alive緩存多層列表頁(yè)的方法
- 基于vue中keep-alive緩存問(wèn)題的解決方法
- 詳解關(guān)于Vue2.0路由開(kāi)啟keep-alive時(shí)需要注意的地方
- Vue中 key keep-alive的實(shí)現(xiàn)原理
- vue解決使用webpack打包后keep-alive不生效的方法
- vue.js內(nèi)置組件之keep-alive組件使用
- vue keep-alive請(qǐng)求數(shù)據(jù)的方法示例
- vue中keep-alive的用法及問(wèn)題描述
- vue中進(jìn)入詳情頁(yè)記住滾動(dòng)位置的方法(keep-alive)
相關(guān)文章
Antd-vue Table組件添加Click事件,實(shí)現(xiàn)點(diǎn)擊某行數(shù)據(jù)教程
這篇文章主要介紹了Antd-vue Table組件添加Click事件,實(shí)現(xiàn)點(diǎn)擊某行數(shù)據(jù)教程,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11vue3?父控件遠(yuǎn)程獲取數(shù)據(jù)在子組件上顯示不出來(lái)的解決方案
這篇文章主要介紹了vue3?父控件遠(yuǎn)程獲取數(shù)據(jù),在子組件上顯示不出來(lái),本文給大家分享兩種解決方案幫助大家解決這個(gè)問(wèn)題,需要的朋友可以參考下2023-08-08vue子組件設(shè)計(jì)provide和inject理解使用
這篇文章主要為大家介紹了vue子組件設(shè)計(jì)provide和inject理解及使用示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08vue.js模版插值的原理與實(shí)現(xiàn)方法簡(jiǎn)析
這篇文章主要介紹了vue.js模版插值的原理與實(shí)現(xiàn)方法,結(jié)合實(shí)例形式簡(jiǎn)單分析了vue.js模板插值的基本功能、原理、實(shí)現(xiàn)方法與注意事項(xiàng),需要的朋友可以參考下2023-04-04Vue和React中快速使用Electron的簡(jiǎn)單教程
Electron也可以快速地將你的網(wǎng)站打包成一個(gè)原生應(yīng)用發(fā)布,下面這篇文章主要給大家介紹了關(guān)于Vue和React中快速使用Electron的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-05-05詳解vue組件化開(kāi)發(fā)-vuex狀態(tài)管理庫(kù)
本篇文章主要介紹了詳解vue組件化開(kāi)發(fā)-vuex狀態(tài)管理庫(kù),具有一定的參考價(jià)值,有興趣的可以了解一下。2017-04-04Vue.prototype全局變量的實(shí)現(xiàn)示例
在Vue中可以使用Vue.prototype向Vue的全局作用域添加屬性或方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2024-06-06antd Select下拉菜單動(dòng)態(tài)添加option里的內(nèi)容操作
這篇文章主要介紹了antd Select下拉菜單動(dòng)態(tài)添加option里的內(nèi)容操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11