vuekeep-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'}
},

标题名称:vuekeep-alive实现多组件嵌套中个别组件存活不销毁的方法-创新互联
本文地址:http://pwwzsj.com/article/cogico.html