vue使用keep-alive實現多元件巢狀中個別元件存活不銷燬

前言

最近在做一個精品課程後臺管理系統，其中涉及檔案上傳和檔案列表展示，我不想將他們寫入一個元件，故分開兩個元件實現，但由於上傳檔案需要時間，這時要是使用者切換別的元件檢視時，上傳檔案元件就銷燬了，導致檔案上傳失敗，所以需要採取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',
          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'}
},

各父元件都是如此：

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

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