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>
©️2020 CSDN 皮肤主题: 1024 设计师:上身试试 返回首页