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>