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


Posted in Javascript onOctober 30, 2020

前言

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

补充知识: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'
})

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

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

Javascript 相关文章推荐
利用毫秒减值计算时长的js代码
Sep 22 Javascript
jQuery ajax dataType值为text json探索分享
Sep 23 Javascript
JS批量操作CSS属性详细解析
Dec 16 Javascript
jquery Ajax 实现加载数据前动画效果的示例代码
Feb 07 Javascript
JavaScript_object基础入门(必看篇)
Jun 13 Javascript
angularjs 源码解析之scope
Aug 22 Javascript
require.js 加载 vue组件 r.js 合并压缩的实例
Oct 14 Javascript
js实现颜色阶梯渐变效果(Gradient算法)
Mar 21 Javascript
node.js利用mongoose获取mongodb数据的格式化问题详解
Oct 06 Javascript
jquery手机触屏滑动拼音字母城市选择器的实例代码
Dec 11 jQuery
JS如何获取地址栏的参数实例讲解
Oct 06 Javascript
VUE页面中通过双击实现复制表格中内容的示例代码
Jun 11 Javascript
vuecli项目构建SSR服务端渲染的实现
Oct 30 #Javascript
Javascript文本框脚本实现方法解析
Oct 30 #Javascript
vue使用keep-alive实现组件切换时保存原组件数据方法
Oct 30 #Javascript
vue内置组件keep-alive事件动态缓存实例
Oct 30 #Javascript
Javascript表单序列化原理及实现代码详解
Oct 30 #Javascript
解决Vue-cli无法编译es6的问题
Oct 30 #Javascript
Vue2.0 ES6语法降级ES5的操作
Oct 30 #Javascript
You might like
浅谈PHP中Stream(流)
2015/06/08 PHP
PHP获取客户端及服务器端IP的封装类
2016/07/21 PHP
php中this关键字用法分析
2016/12/07 PHP
javascript 读取xml,写入xml 实现代码
2009/07/10 Javascript
教您去掉ie网页加载进度条的方法
2010/12/09 Javascript
javascript开发随笔二 动态加载js和文件
2011/11/25 Javascript
JavaScript在XHTML中的用法详解
2013/04/11 Javascript
基于jquery实现控制经纬度显示地图与卫星
2013/05/20 Javascript
JS 实现导航栏悬停效果(续2)
2013/09/24 Javascript
利用Jquery实现可多选的下拉框
2014/02/21 Javascript
JavaScript的各种常见函数定义方法
2014/09/16 Javascript
js实现具有高亮显示效果的多级菜单代码
2015/09/01 Javascript
javascript类型系统——undefined和null全面了解
2016/07/13 Javascript
Vue-resource安装过程及使用方法解析
2020/07/21 Javascript
Openlayers实现点闪烁扩散效果
2020/09/24 Javascript
如何封装Vue Element的table表格组件
2021/02/06 Vue.js
[01:24:34]2014 DOTA2华西杯精英邀请赛5 24 DK VS LGD
2014/05/25 DOTA
[01:37]PWL S2开团时刻DAY1&2——这符有毒
2020/11/20 DOTA
Python中Random和Math模块学习笔记
2015/05/18 Python
Python的语言类型(详解)
2017/06/24 Python
Python实现的文本编辑器功能示例
2017/06/30 Python
Python输出带颜色的字符串实例
2017/10/10 Python
python实现数据预处理之填充缺失值的示例
2017/12/22 Python
Python对象与引用的介绍
2019/01/24 Python
python自动化测试之异常及日志操作实例分析
2019/11/09 Python
Python多线程Threading、子线程与守护线程实例详解
2020/03/24 Python
Skyscanner英国:苏格兰的全球三大领先航班搜索服务之一
2017/11/09 全球购物
美国在线购买和出售礼品卡网站:EJ Gift Cards
2019/06/09 全球购物
如何在发生故障的节点上重新安装 SQL Server
2013/03/14 面试题
外语专业毕业生自我评价分享
2013/10/05 职场文书
城管综合整治方案
2014/05/01 职场文书
我有一个梦想演讲稿
2014/05/05 职场文书
财务部会计岗位职责
2015/02/03 职场文书
端午节活动总结报告
2015/02/11 职场文书
Javascript设计模式之原型模式详细
2021/10/05 Javascript
Mysql 文件配置解析介绍
2022/05/06 MySQL