前言
最近在做一个精品课程后台管理系统,其中涉及文件上传和文件列表展示,我不想将他们写入一个组件,故分开两个组件实现,但由于上传文件需要时间,这时要是用户切换别的组件查看时,上传文件组件就销毁了,导致文件上传失败,所以需要采取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>