admin管理员组

文章数量:1633920

前言

最近在做项目重构的事情，原来的一个Vue项目有几十个菜单，项目大的令人发指，所以准备重构，使用了umi+qiankun的方式，子应用使用了vue和react两个类型的框架。

需求

因为用到了umi框架，默认的路由文件统一配置在config/routers下面，并且是静态的，但是因为现在是动态添加的子应用，如果使用静态的路由文件，每次新加一个子应用，就需要修改一次主应用中的路由文件再发布一次，明显感觉不合理。因此找了一个解决动态路由的方法，也是官方的解决方案。配置的方式主要是在运行时进行，官方文件见https://umijs/zh-CN/docs/runtime-config

配置

  • 第一步：获取子应用配置列表

因为涉及使用到微应用的配置方式，所以首先是在app.ts中调用接口获取微应用的信息列表

// 后面需要使用
let globalApp: any[] = [];
// 获取微应用信息列表
export const qiankun = getApps().then((data) => {
    const apps = data?.DATA.filter((i: { entry: any }) => i.entry) || [];

    const tmp = apps?.map((app: any) => {
        return {
            ...app,
            // 增加一些子应用需要用到变量
            props: {
                globalState: {
                    ...

本文标签： 路由加载动态umiqiankun

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