admin管理员组

文章数量:1633920

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

前言

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


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


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

子应用

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

路由代码

页面代码
copy 自 pages/index.tsx


主应用

根据官网文档：

  • https://umijs/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',

本文标签： 路由解决方案动态umiqiankun

版权声明：本文标题：umi +qiankun 主应用动态装载子应用（路由）解决方案 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/dianzi/1729177510a1188904.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。