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

发布时间:2020-11-02 16:05:38 作者:Leah
来源:亿速云 阅读:521

今天就跟大家聊聊有关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>

补充知识:vue页签模式+keep-alive解决关闭页签后缓存组件未销毁问题

1.简介

vue使用页签模式,组件使用keep-alive缓存,发现页签关闭后缓存组件未销毁,只是出于非活动状态

2.解决

使用keep-alive的include属性,这个属性包含了缓存组件的名称,可以将其赋值为动态属性

页签store

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为页签名称列表,即要缓存的页签组件名称

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

看完上述内容,你们对vue keep-alive实现多组件嵌套中个别组件存活不销毁的方法有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注亿速云行业资讯频道,感谢大家的支持。

推荐阅读:
  1. Vue的钩子函数[路由导航、keep-alive、生命周期钩子]
  2. vue keep-alive组件如何使用

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

vue keep-alive ue

上一篇:vuecli项目实现构建SSR服务端渲染

下一篇:vue缓存之keep-alive的理解和应用详解

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》