umi +qiankun 主应用动态装载子应用(路由)解决方案

blueju 等级 410 0 0

前言

接上一篇(https://www.yuque.com/blueju/blog/gtgndg),上一篇中使用的都是运行时动态注册子应用,子应用路由仍然是写死的、非动态获取。

然后真实项目中除了需要动态注册子应用,还很有可能需要动态装载子应用(路由),比如说:不同权限的用户需要给予他们不同的路由。

此篇 blog 的代码是基于上一篇进行改动的,上一篇 blog 中的代码对应的 GitHub 地址是:https://github.com/blueju/umi-mirror-docs/tree/runtime-dynamic-register-sub-app

子应用

为了体现出现演示效果,我们先为子应用添加两个新页面和新路由,如下图:

路由代码

umi +qiankun 主应用动态装载子应用(路由)解决方案

页面代码 copy 自 pages/index.tsx

umi +qiankun 主应用动态装载子应用(路由)解决方案

主应用

根据官网文档:

我们知道,动态装载子应用(路由)的方式有两种,


在这里,我可以明确地告诉大家,截止目前(2020年9月6日17点51分),动态装载子应用(路由)无法使用第一种方式(在 config/config.ts 中配置路由)。
umi +qiankun 主应用动态装载子应用(路由)解决方案

删除之前写死的子应用(路由)装载

在 config/config.ts 中删除之前写的以下子应用(路由)装载配置:

{
  name: 'sub-app-1',
  icon: 'smile',
  path: '/sub-app-1',
  microApp: 'sub-app-1',
},

添加子应用路由配置(Mock)

https://github.com/blueju/umi-docs/commit/5f330d5233ebe566c8e4f8c1cc1749e2b4cdcfdf

添加子应用容器

https://github.com/blueju/umi-docs/commit/849d9f3dbe930a092938334e66d51568ed873fe3
在 src/layouts 下新建一个叫 MicroAppLayout.tsx 的文件

import { MicroApp } from 'umi';
import React from 'react';

function MicroAppLayout() {
  return <MicroApp name="sub-app-1" />;
}

export default MicroAppLayout;

动态装载子应用路由

在 src/app.tsx 下新建 app.tsx 文件,代码为:

import { dynamic } from 'umi';
import LoadingComponent from '@/components/PageLoading';

let extraRoutes: object[] = [];

export const qiankun = fetch('/api/config')
  .then((res) => {
    return res.json();
  })
  .then(({ apps }) => {
    return Promise.resolve({
      // 注册子应用信息
      apps,
      // 完整生命周期钩子请看 https://qiankun.umijs.org/zh/api/#registermicroapps-apps-lifecycles
      lifeCycles: {
        afterMount: (props) => {
          console.log(props);
        },
      },
      // 支持更多的其他配置,详细看这里 https://qiankun.umijs.org/zh/api/#start-opts
    });
  });

export function patchRoutes({ routes }) {
  extraRoutes.forEach((element) => {
    routes[1].routes[0].routes.unshift({
      name: element.name,
      icon: 'smile',
      path: element.path,
      component: dynamic({
        loader: () =>
          import(/* webpackChunkName: 'layouts__MicroAppLayout' */ '@/layouts/MicroAppLayout'),
        loading: LoadingComponent,
      }),
    });
  });
}

export async function render(oldRender) {
  fetch('/api/config')
    .then((res) => {
      return res.json();
    })
    .then((resJson) => {
      extraRoutes = resJson.routes;
      oldRender();
    });
}

Github

https://github.com/blueju/umi-docs/tree/runtime-dynamic-load-sub-app-router

参考:
https://github.com/ant-design/ant-design-pro/issues/5909
如何从服务端获取菜单数据及权限校验
umi 运行时配置
Antd Design Pro 中如何动态获取路由替换掉config/route.config.js
antd pro 动态菜单与动态路由
是否真的不支持动态路由
[Feature Request] 微前端框架下动态增加微前端路由
运行时配置:patchRoutes动态添加多级路由,子路由没效果。
https://github.com/umijs/umi/issues/5003

收藏
评论区

相关推荐

JS排序算法
引子 有句话怎么说来着: 雷锋推倒雷峰塔,Java implements JavaScript. 当年,想凭借抱Java大腿火一把而不惜把自己名字给改了的JavaScript(原名LiveScript),如今早已光芒万丈。node JS的出现更是让JavaScript可以前后端通吃。虽然Java依然制霸企业级软件开发领域(C/C 的大神们不要打
Canvas入门实战之用javascript面向对象实现一个图形验证码
本文主要介绍用canvas实现图形验证码的一些思路以及如何用javascript面向对象的方式更友好的实现canvas的功能,关于canvas的一些基本使用方法和API我整理了一个思维导图,大家感兴趣的可以参考学习。 (https://imghelloworld.osscnbeijing.aliyuncs.com/imgs/b158fad95
vue.config.js配置前端代理
// vue.config.js 配置说明 //官方vue.config.js 参考文档 https://cli.vuejs.org/zh/config/cssloaderoptions // 这里只列一部分,具体配置参考文档 module.exports { // 部署生产环境和开发环境下的URL。 // 默认情况下,Vue CLI
巨大提升!更快的 async 函数和 promises
(https://imghelloworld.osscnbeijing.aliyuncs.com/669a1c8f7203559afa4621628303674c.png) 翻译自:Faster async functions and promises(https://v8.dev/blog/fastasync) JavaScript
JavaScript中本地存储的方式有哪些?
(https://imghelloworld.osscnbeijing.aliyuncs.com/1f907f0895e2be23aa56604dd42e3626.png) 一、方式 javaScript本地缓存的方法我们主要讲述以下四种: cookie sessionStorage loc
基于Vue3+TypeScript+ Vue-Cli4.0构建手机端模板脚手架
vue3h5template基于 Vue3TypeScript VueCli4.0 vant ui sass rem 适配方案axios 封装 jssdk 配置 vconsole 移动端调试,构建手机端模板脚手架项目地址: 建议手机端查看 Node 版本要求Vue CLI 需要 Node.js 8.9 或更高版本
搭建 umi + qiankun + antd 的微前端平台
<a name"f5444d4a"</a 关键词: umi qiankun ant design pro 非动态注册子应用 非动态装载子应用(路由)<a name"Lxdp4"</a 背景银行项目,需要一个前端中台,承载各项目组开发的应用,本篇文章是在工作实践后所写,还是具有一定可借鉴性的,至于官网已经有相关内容还专门写这么一篇,还
umi 项目多环境打包配置
参考:1. 1. 1. <br /我的需求: 在不同环境(dvl、sit)下打包,请求基础地址也需要随环境的变化而改变<br /遇到的困难: umi v3 文档不完善 未知bug<a name"K770H"</a 1. 创建不同环境的配置文件此部分可参考:2. <br /需要 dvl、sit 两个环境,因此创建两个配置文件,如图:<br
umi + qiankun 动态注册子应用解决方案
前言 首发于 <br /本篇文章可以被视为上一篇文章()的延续,上一篇文章大致讲述了搭建一个简易微前端平台的过程,其中关于子应用注册的配置是通过硬编码的方式,在构建打包前写入的。<br /<br /但是真实项目中,更需要的是动态注册子应用,比如说我正参与的这个项目。<br /<br /本篇文章的示例代码是基于上一篇文章示例代码改动的,上一篇文
umi +qiankun 主应用动态装载子应用(路由)解决方案
<a name"p1boA"</a 前言接上一篇(),上一篇中使用的都是运行时动态注册子应用,子应用路由仍然是写死的、非动态获取。<br /<br /然后真实项目中除了需要动态注册子应用,还很有可能需要动态装载子应用(路由),比如说:不同权限的用户需要给予他们不同的路由。<br /<br /此篇 blog 的代码是基于上一篇进行改动的,上一篇
使用 umi 3 创建子应用并接入主应用
使用 umi 3 创建子应用并接入主应用前言:<br /umi 3 更新频繁,文档不完善,时效性不定,因此前提条件很重要,今天是2020年8月21日。<br /<br /创建子应用使用的脚手架是:umi 3<br /创建主应用使用的脚手架是:um 2,但是本篇文章暂时不介绍创建主应用的过程及在主应用中的配置过程。<br /<a name"Yd
Lumen 中配置邮件发送并使用不同发件人发信实例
Intro阿里网易企业邮发件可参考另一篇: 基本配置Composer 安装 illuminate/mail 组件后将下方内容保存为 mail.php 放置于 Project/config 目录php<?phpreturn / |
14个优秀 JS 前端框架、库、工具及其使用时机
  这篇文章主要描述现今流行的一些 Javascript web 前端框架,库以及它们的适用场景。   新的 Javascript 库层出不穷,从而Web 社区愈发活跃、多样、在多方面快速发展。详细去描述每一种主流的 Javascript 框架和库近乎
JavaScript 和 Node.js 中事件循环
1.JavaScript中事件循环可以参考《JavaScript忍者秘籍第二版》第十三章,讲解的很好。JavaScript中事件循环,主要就在理解宏任务和微任务这两种异步任务。宏任务(macrotask): setTimeOut 、 setInterval 、 setImmediate 、 I/O 、 各种callback、 UI渲染 、messageCh
https://cloud.tencent.com/developer/article/write/1830331
一、目标今天的目标是这个sign和appcode 二、步骤 Jadx没法上了app加了某梆的企业版,Jadx表示无能为力了。 FRIDADEXDumpDexDump出来,木有找到有效的信息。 Wallbreaker葫芦娃的Wallbreaker可以做些带壳分析,不过这个样本,用Frida的Spawn模式可以载入,Attach模式会失败。而直接用Objecti