首页 > 编程语言 > vue keep-alive实现多组件嵌套中个别组件存活不销毁的操作
2020
10-30

vue keep-alive实现多组件嵌套中个别组件存活不销毁的操作

前言

最近在做一个精品课程后台管理系统，其中涉及文件上传和文件列表展示，我不想将他们写入一个组件，故分开两个组件实现，但由于上传文件需要时间，这时要是用户切换别的组件查看时，上传文件组件就销毁了，导致文件上传失败，所以需要采取keep-alive技术实现不销毁上传文件组件，同时也由于系统模块较多，所以需要多组件进行嵌套。

问题：多组件嵌套下如何指定对应的一个或多个组件存活呢？

*tips：要是对于Vue使用keep-alive的基本用法不熟悉的也可以点击查看vue使用keep-alive的基本用法

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

MVideoUpload，MFileUpload为上传文件组件，故想之存活，而其他组件则需要挂起刷新数据，但由于MVideoUpload，MFileUpload分别嵌套在MVideos,MFiles组件中，为了保证跳转其他模块组件的时候，上传视频和上传文件的模块不销毁（因为一旦父组件销毁，子组件自然也销毁了），所以两个父组件也需要存活，只是之后需要再加以判断存活那几个子组件。

路由js：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
{
 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'}
},

各父组件都是如此：

一层层判断哪些组件需要存活不销毁，从而实现对任意一个组件切换组件时使其存活不销毁。

?
1
2
3
4
5
6
7
8
<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

?
1
2
3
4
5
6
7
8
9
10
11
12
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为页签名称列表，即要缓存的页签组件名称

?
1
2
3
4
5
6
<keep-alive v-if="isRouterAlive" :include="tagNames">
   <router-view ></router-view>
</keep-alive>
...mapGetters({
  tagNames:'tagNames'
})

这样就保证了移除tag后，相应的组件名称也不会被缓存

以上这篇vue keep-alive实现多组件嵌套中个别组件存活不销毁的操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持自学编程网。

编程技巧