专栏首页方球qiankun + vue 中使用 keep-alive 维持微应用实例

qiankun + vue 中使用 keep-alive 维持微应用实例

image.png

背景

qiankun + vue2.6 + element-ui, 通过标签却换不同功能, 当前一个子应用下可以对应多个功能, 及 存在统一应用下切换,跨应用切换。 当前已通过路由嵌套实现子应用独立管理各自路由,主应用负责跨应该路由切换。子应用使用手动加载。

目的

  • 同时维持多个子应用实例
  • 应用切换不丢失
  • 加载失败时,可二次重载
  • 需要同时维持多个子应用实例
  • 子应用加载成功后切换不丢失
  • 子应用加载失败后可重载

问题

  • 手动加载子应用失败后,二次加载乾坤未重载的应用
  • 子应用切换后将丢失,造成多次需要重复加载
  • 初始加载时间过长

主要的目的是尽量减少子应用的二次加载,避免资源的重复请求.

方案

触发重载

image.png

加载失败后,我们需要用户再次开启功能时,进行重载。 而qiankun当前对统一子应用做的缓存处理,首先需要触发qiankun 重载。参考 这里在构建配置文件时,为请求地址添加一个更新编号, 当需要重载时,更新该编号, 再次手动加载时,将触发子应用的二次加载.

维持实例

这里通过keep-alive 保存我们子应用实例。需要解决的问题是,当应用加载失败时, 我们需要通知keep-alive 排除之前保存的实例对象。 所以需要设置 exclude 属性. 加载子应用时,监听加载结果。成功: exclude 组件名出栈, 失败:exclude 组件名入栈.

image.png

image.png

image.png

需要注意的是, keep-alive 是通过组件名称判断缓存的, 所以在加载前,我们需要先为每个子应用分配独立的组件并注册到容器组件中.

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • qiankun vue3.0 保持组件状态 keep-alive 的使用

    copy_left
  • 让前端走进微时代, 微微一弄很哇塞!

    微前端这个词这两年很频繁的出现在大家的视野中,主要是把微服务的概念引入到了前端,让前端的多个模块或者应用解耦,做到让前端的子模块独立仓储,独立运行,独立部署。

    yuanyi928
  • 微前端qiankun从搭建到部署的实践总结

    最近负责的新项目用到了qiankun,写篇文章分享下实战中遇到的一些问题和思考。

    coder_koala
  • 「从源码中学习」面试官都不知道的Vue题目答案

    当回答面试官问及的Vue问题,我们除了照本宣科的回答外,其实还可以根据少量的源码来秀一把,来体现出你对Vue的深度了解。

    前端劝退师
  • 「从源码中学习」面试官都不知道的Vue题目答案

    当回答面试官问及的Vue问题,我们除了照本宣科的回答外,其实还可以根据少量的源码来秀一把,来体现出你对Vue的深度了解。

    用户1462769
  • 基于 qiankun 的微前端最佳实践(图文并茂) - 应用间通信篇

    本文是基于 qiankun 的微前端最佳实践系列文章之 应用间通信篇,本文将分享在 qiankun 中如何进行应用间通信。

    落落落洛克
  • 「从源码中学习」面试官可能都不知道的Vue题目答案

    当回答面试官问及的Vue问题,我们除了照本宣科的回答外,其实还可以根据少量的源码来秀一把,来体现出你对Vue的深度了解。

    桃翁
  • 「从源码中学习」面试官都不知道的Vue题目答案

    当回答面试官问及的Vue问题,我们除了照本宣科的回答外,其实还可以根据少量的源码来秀一把,来体现出你对Vue的深度了解。

    胡哥有话说
  • 彻底揭秘keep-alive原理

    用户在某个列表页面选择筛选条件过滤出一份数据列表,由列表页面进入数据详情页面,再返回该列表页面,我们希望:列表页面可以保留用户的筛选(或选中)状态。keep-a...

    前端黑板报
  • 上线一个阿里 QianKun “微前端”,逼走了2 位 90后

    鉴于当下流行的开发模式几乎都是前后端分离的,为了组建好团队,前端、后端几乎1比1配置好像有些不太对,因此稍微倾斜了下后端,按80%配置前端,这个比例到底是不是合...

    winty
  • 基于qiankun落地部署微前端爬”坑“记

    举个例子:我们有个这样的场景,我有个门户Portal的登陆界面(主应用基座),登陆成果后可以切换不同的子应用,如下有两个子应用A和B,且都在之前是独立部署的,单...

    树酱
  • 基于qiankun落地部署微前端爬”坑“记

    举个例子:我们有个这样的场景,我有个门户Portal的登陆界面(主应用基座),登陆成果后可以切换不同的子应用,如下有两个子应用A和B,且都在之前是独立部署的,单...

    树酱
  • 记一次 微前端 qiankun 项目 实践 !!! 防踩坑指南

    最近在做微前端的项目 , 过程中真是踩了不少坑 , 在有限的资料中不断试错 , 默默无语两行泪 哈哈.  在此次将采坑部分都记录下来, 让更多的人少走点弯路 ,...

    王小婷
  • keep-alive的实现原理及LRU缓存策略

    <keep-alive>是vue源码中实现的一个组件, 我们可以从源码入手进行分析,基于vue 2.6.11 版本, 源码位置src/core/componen...

    木子星兮
  • 微前端 qiankun 项目实践 !!! 防踩坑指南

    最近在做微前端的项目 , 过程中真是踩了不少坑 , 在有限的资料中不断试错 , 默默无语两行泪 哈哈. 在此次将采坑部分都记录下来, 让更多的人少走点弯路 ,...

    小丑同学
  • 基于 qiankun 的微前端最佳实践(万字长文) - 从 0 到 1 篇

    本文是基于 qiankun 的微前端最佳实践系列文章之 从 0 到 1 篇,本文将分享如何使用 qiankun 如何搭建主应用基座,然后接入不同技术栈的微应用,...

    coder_koala
  • 后台tab页接入微应用的问题

    为了尽量兼容原组件加载方式,这里微应用的加载触发,选择沿用原触发方式,只在配置已经渲染出口时做差异化处理. 这里只做简单流程梳理 路由注册以及触发流程

    copy_left
  • 深度:从零编写一个微前端框架

    那么现在我们需要手写一个微前端框架,首先得让大家知道什么是微前端,现在微前端模式分很多种,但是大都是一个基座+多个子应用模式,根据子应用注册的规则,去展示子应用...

    Peter谭金杰
  • 微前端框架 qiankun 项目实战(一)--本地开发篇

    公司使用技术栈是vue,最近遇到了一个需求,要把原有后台管理系统的功能模块搬迁到新的后台管理系统上面去。原本这没有多复杂的事,直接复制粘贴改改就可以,但是有这么...

    coder_koala

扫码关注云+社区

领取腾讯云代金券