vue keep alive realizes the operation that individual components survive without destruction in multi component nesting

Preface

Recently, I am working on a background management system for excellent courses, Which involves file uploading and file list display, I don't want to write them to a component, Therefore, it is realized separately by two components, but because it takes time to upload files, if the user switches other components to view at this time, the uploaded file components will be destroyed, resulting in the failure of file uploading, so keep-alive technology is needed to realize the non-destruction of uploaded file components, and at the same time, because there are many system modules, multiple components need to be nested.

Question: How to specify the survival of one or more corresponding components under multi-component nesting?

* tips: If you are not familiar with the basic usage of Vue using keep-alive, you can also click to view the basic usage of vue using keep-alive

Configure the route to determine whether to use keep-alive

MVideoUpload, MFileUpload is a file upload component, Therefore, if you want to survive, While other components need to suspend refreshing data, However, because MVideoUpload and MFileUpload are nested in MVideos and MFiles components respectively, in order to ensure that the modules for uploading videos and files will not be destroyed when jumping to other module components (because the parent component is destroyed, the sub-components will naturally be destroyed), so the two parent components also need to survive, but it is necessary to judge which sub-components survive later.

Route js:

{
 path:'resource',
 name:'MResource',
 meta:{
 auth:true  // Do you need to log in 
 },
 component: () => import('../pages/manage/resource/Resource'),
 children:[
 {
  path: 'videos',
  name: 'MVideos',
  meta:{
  keepAlive:true, // Include surviving components 
  auth:true  // Do you need to log in 
  },
  component: () => import('../pages/manage/resource/videos/Videos'),
  children:[
  {
   path:'list',
   name:'MVideoList',
   meta:{
   auth:true  // Do you need to log in 
   },
   component: () => import('../pages/manage/resource/videos/VideosList'),
  },
  {
   path:'upload',
   name:'MVideoUpload',
   meta:{
   keepAlive:true, // Need to survive 
   auth:true  // Do you need to log in 
   },
   component: () => import('../pages/manage/resource/videos/UploadVideo'),
  },
  {
   path:'update',
   name:'MVideoUpdate',
   meta:{
   auth:true  // Do you need to log in 
   },
   component: () => import('../pages/manage/resource/videos/UpdateVideo'),
  },
  {
   path:'detail',
   name:'MVideoDetail',
   meta:{
   auth:true  // Do you need to log in 
   },
   component: () => import('../pages/manage/resource/videos/VideoDetail'),
  },
  ],
  redirect:{name: 'MVideoList'}
 },
 {
  path:'files',
  name:'MFiles',
  meta:{
  keepAlive:true, // Include surviving components 
  auth:true  // Do you need to log in 
  },
  component: () => import('../pages/manage/resource/files/Files'),
  children:[
  {
   path: 'list',
   name: 'MFileList',
   meta:{
   auth:true  // Do you need to log in 
   },
   component: () => import('../pages/manage/resource/files/FilesList'),
  },
  {
   path:'upload',
   name:'MFileUpload',
   meta:{
   keepAlive:true, // Need to survive 
   auth:true  // Do you need to log in 
   },
   component: () => import('../pages/manage/resource/files/UploadFile'),
  },
  {
   path:'update',
   name:'MFileUpdate',
   meta:{
   auth:true  // Do you need to log in 
   },
   component: () => import('../pages/manage/resource/files/UpdateFile'),
  },
  {
   path:'detail',
   name:'MFileDetail',
   meta:{
   auth:true  // Do you need to log in 
   },
   component: () => import('../pages/manage/resource/files/FileDetail'),
  },
  ],
  redirect:{name: 'MFileList'}
 },
 ],
 redirect:{name: 'MFiles'}
},

This is true for each parent component:

1 layer by layer to judge which components need to survive without destruction, so as to realize any 1 component switching components to survive without destruction.

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

Supplementary knowledge: vue tab mode + keep-alive solves the problem that cache components are not destroyed after closing tabs

1. Introduction

vue uses tab mode, and components use keep-alive cache. It is found that the cached components are not destroyed after the tab is closed, but only in an inactive state

STEP 2 Resolve

Use the include attribute of keep-alive, which contains the name of the cache component and can be assigned as a dynamic attribute

Tab store

export default {
 state: {
  current: layui.data('tag').current || {},// Current tab 
  list: layui.data('tag').list || []// Tab list 
 },
 getters:{
  /**  Label name list  */
  tagNames (state) {
   return state.list.map(function(tag){return tag.name})
  }
 }
}

list is the tab object list

tagNames is the page signature name list, which is the name of the tab component to cache

<keep-alive v-if="isRouterAlive" :include="tagNames">
   <router-view ></router-view>
</keep-alive>
...mapGetters({
  tagNames:'tagNames'
})

This ensures that after removing tag, the corresponding component name will not be cached