前言

最近在做一個精品課程後臺管理系統，其中涉及檔案上傳和檔案列表展示，我不想將他們寫入一個元件，故分開兩個元件實現，但由於上傳檔案需要時間，這時要是使用者切換別的元件檢視時，上傳檔案元件就銷燬了，導致檔案上傳失敗，所以需要採取keep-alive技術實現不銷燬上傳檔案元件，同時也由於系統模組較多，所以需要多元件進行巢狀。

問題：多元件巢狀下如何指定對應的一個或多個元件存活呢？

*tips：要是對於Vue使用keep-alive的基本用法不熟悉的也可以點選檢視vue使用keep-alive的基本用法

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

MVideoUpload，MFileUpload為上傳檔案元件，故想之存活，而其他元件則需要掛起重新整理資料，但由於MVideoUpload，MFileUpload分別巢狀在MVideos,MFiles元件中，為了保證跳轉其他模組元件的時候，上傳視訊和上傳檔案的模組不銷燬（因為一旦父元件銷燬，子元件自然也銷燬了），所以兩個父元件也需要存活，只是之後需要再加以判斷存活那幾個子元件。

路由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',component: () => import('../pages/manage/resource/videos/UpdateVideo'),{
   path:'detail',name:'MVideoDetail',component: () => import('../pages/manage/resource/videos/VideoDetail'),],redirect:{name: 'MVideoList'}
 },{
  path:'files',name:'MFiles',component: () => import('../pages/manage/resource/files/Files'),children:[
  {
   path: 'list',name: 'MFileList',component: () => import('../pages/manage/resource/files/FilesList'),name:'MFileUpload',component: () => import('../pages/manage/resource/files/UploadFile'),name:'MFileUpdate',component: () => import('../pages/manage/resource/files/UpdateFile'),name:'MFileDetail',component: () => import('../pages/manage/resource/files/FileDetail'),redirect:{name: 'MFileList'}
 },redirect:{name: 'MFiles'}
},

各父元件都是如此：

一層層判斷哪些元件需要存活不銷燬，從而實現對任意一個元件切換元件時使其存活不銷燬。

<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>

補充知識：vue頁籤模式+keep-alive解決關閉頁籤後快取元件未銷燬問題

1.簡介

vue使用頁籤模式，元件使用keep-alive快取，發現頁籤關閉後快取元件未銷燬，只是出於非活動狀態

2.解決

使用keep-alive的include屬性，這個屬性包含了快取元件的名稱，可以將其賦值為動態屬性

頁籤store

export default {
 state: {
  current: layui.data('tag').current || {},//當前頁籤
  list: layui.data('tag').list || []//頁籤列表
 },getters:{
  /** 標籤名稱列表 */
  tagNames (state) {
   return state.list.map(function(tag){return tag.name})
  }
 }
}

list是頁籤物件列表

tagNames為頁簽名稱列表，即要快取的頁籤元件名稱

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

這樣就保證了移除tag後，相應的元件名稱也不會被快取

以上這篇vue keep-alive實現多元件巢狀中個別元件存活不銷燬的操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。