前言

最近在做一個(gè)精品課程后臺(tái)管理系統(tǒng)，其中涉及文件上傳和文件列表展示，我不想將他們寫入一個(gè)組件，故分開兩個(gè)組件實(shí)現(xiàn)，但由于上傳文件需要時(shí)間，這時(shí)要是用戶切換別的組件查看時(shí)，上傳文件組件就銷毀了，導(dǎo)致文件上傳失敗，所以需要采取keep-alive技術(shù)實(shí)現(xiàn)不銷毀上傳文件組件，同時(shí)也由于系統(tǒng)模塊較多，所以需要多組件進(jìn)行嵌套。

問題：多組件嵌套下如何指定對(duì)應(yīng)的一個(gè)或多個(gè)組件存活呢？

*tips：要是對(duì)于Vue使用keep-alive的基本用法不熟悉的也可以點(diǎn)擊查看vue使用keep-alive的基本用法

配置路由加以判斷是否使用keep-alive

MVideoUpload，MFileUpload為上傳文件組件，故想之存活，而其他組件則需要掛起刷新數(shù)據(jù)，但由于MVideoUpload，MFileUpload分別嵌套在MVideos,MFiles組件中，為了保證跳轉(zhuǎn)其他模塊組件的時(shí)候，上傳視頻和上傳文件的模塊不銷毀（因?yàn)橐坏└附M件銷毀，子組件自然也銷毀了），所以兩個(gè)父組件也需要存活，只是之后需要再加以判斷存活那幾個(gè)子組件。

路由js：

{ path:’resource’, name:’MResource’, meta:{ auth:true //是否需要登錄 }, component: () => import(’../pages/manage/resource/Resource’), children:[ { path: ’videos’, name: ’MVideos’, meta:{ keepAlive:true, //包含存活組件 auth:true //是否需要登錄 }, component: () => import(’../pages/manage/resource/videos/Videos’), children:[ { path:’list’, name:’MVideoList’, meta:{ auth:true //是否需要登錄 }, component: () => import(’../pages/manage/resource/videos/VideosList’), }, { path:’upload’, name:’MVideoUpload’, meta:{ keepAlive:true, //需要存活 auth:true //是否需要登錄 }, component: () => import(’../pages/manage/resource/videos/UploadVideo’), }, { path:’update’, name:’MVideoUpdate’, meta:{ auth:true //是否需要登錄 }, component: () => import(’../pages/manage/resource/videos/UpdateVideo’), }, { path:’detail’, name:’MVideoDetail’, meta:{ auth:true //是否需要登錄 }, component: () => import(’../pages/manage/resource/videos/VideoDetail’), }, ], redirect:{name: ’MVideoList’} }, { path:’files’, name:’MFiles’, meta:{ keepAlive:true, //包含存活組件 auth:true //是否需要登錄 }, component: () => import(’../pages/manage/resource/files/Files’), children:[ { path: ’list’, name: ’MFileList’, meta:{ auth:true //是否需要登錄 }, component: () => import(’../pages/manage/resource/files/FilesList’), }, { path:’upload’, name:’MFileUpload’, meta:{ keepAlive:true, //需要存活 auth:true //是否需要登錄 }, component: () => import(’../pages/manage/resource/files/UploadFile’), }, { path:’update’, name:’MFileUpdate’, meta:{ auth:true //是否需要登錄 }, component: () => import(’../pages/manage/resource/files/UpdateFile’), }, { path:’detail’, name:’MFileDetail’, meta:{ auth:true //是否需要登錄 }, component: () => import(’../pages/manage/resource/files/FileDetail’), }, ], redirect:{name: ’MFileList’} }, ], redirect:{name: ’MFiles’}},

各父組件都是如此：

一層層判斷哪些組件需要存活不銷毀，從而實(shí)現(xiàn)對(duì)任意一個(gè)組件切換組件時(shí)使其存活不銷毀。

<transition name='component-fade' mode='out-in'> <keep-alive> <router-view v-if='$route.meta.keepAlive' /> </keep-alive></transition><transition name='component-fade' mode='out-in'> <router-view v-if='!$route.meta.keepAlive' /></transition>

補(bǔ)充知識(shí)：vue頁(yè)簽?zāi)Ｊ?keep-alive解決關(guān)閉頁(yè)簽后緩存組件未銷毀問題

1.簡(jiǎn)介

vue使用頁(yè)簽?zāi)Ｊ剑M件使用keep-alive緩存，發(fā)現(xiàn)頁(yè)簽關(guān)閉后緩存組件未銷毀，只是出于非活動(dòng)狀態(tài)

2.解決

使用keep-alive的include屬性，這個(gè)屬性包含了緩存組件的名稱，可以將其賦值為動(dòng)態(tài)屬性

頁(yè)簽store

export default { state: { current: layui.data(’tag’).current || {},//當(dāng)前頁(yè)簽 list: layui.data(’tag’).list || []//頁(yè)簽列表 }, getters:{ /** 標(biāo)簽名稱列表 */ tagNames (state) { return state.list.map(function(tag){return tag.name}) } }}

list是頁(yè)簽對(duì)象列表

tagNames為頁(yè)簽名稱列表，即要緩存的頁(yè)簽組件名稱

<keep-alive v-if='isRouterAlive' :include='tagNames'> <router-view ></router-view></keep-alive>...mapGetters({ tagNames:’tagNames’})

這樣就保證了移除tag后，相應(yīng)的組件名稱也不會(huì)被緩存

以上這篇vue keep-alive實(shí)現(xiàn)多組件嵌套中個(gè)別組件存活不銷毀的操作就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持好吧啦網(wǎng)。