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

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

前言

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


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


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

子应用

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

路由代码

页面代码
copy 自 pages/index.tsx

主应用

根据官网文档：

• https://umijs.org/zh-CN/plugins/plugin-qiankun#a-使用路由绑定的方式

我们知道，动态装载子应用（路由）的方式有两种，

• 一是在 config/config.ts 中配置路由
• 二是类似 React 使用组件路由

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

删除之前写死的子应用（路由）装载

在 config/config.ts 中删除之前写的以下子应用（路由）装载配置：

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