umi-plugin-auto-routes

一个基于远程菜单API自动生成路由和页面组件的UMI插件。

安装

# npm
npm install umi-plugin-auto-routes --save-dev

# yarn
yarn add umi-plugin-auto-routes --dev

# pnpm
pnpm add umi-plugin-auto-routes -D

使用方法

1. 在您的UMI项目中安装插件
2. 在.umirc.ts或config/config.ts文件中配置插件：

import { defineConfig } from 'umi';

export default defineConfig({
  plugins: ['umi-plugin-auto-routes'],
  autoRoutes: {
    // 必填：指定获取菜单数据的API地址
    menuApi: 'https://your-api-endpoint/menu',
    
    // 可选：指定页面目录路径（默认：'./src/pages'）
    outputPath: './src/pages',
    
    // 可选：自定义路由格式化函数
    formatRoute: (route) => {
      // 对路由进行自定义处理
      return {
        ...route,
        // 添加其他属性或修改现有属性
      };
    }
  },
  // ... 其他UMI配置
});

工作原理

该插件通过以下步骤工作：

1. 从配置的menuApi获取菜单数据
2. 解析菜单数据并生成对应的路由配置
3. 自动创建页面组件文件
4. 将生成的路由配置写入到config/routes.ts文件中
5. 将新路由添加到UMI配置中（仅添加不存在的路由）

配置选项

| 选项 | 类型 | 默认值 | 描述 | |--------|------|---------|-------------| | menuApi | string | - | 必填：获取菜单数据的API地址 | | outputPath | string | './src/pages' | 生成页面组件的目录路径 | | formatRoute | function | - | 自定义路由格式化函数，可用于修改生成的路由对象 |

菜单数据格式

插件期望API返回的菜单数据格式如下：

[
  {
    "name": "首页",
    "path": "/home"
  },
  {
    "name": "系统管理",
    "children": [
      {
        "name": "用户管理",
        "path": "/system/user"
      },
      {
        "name": "角色管理",
        "path": "/system/role"
      }
    ]
  }
]

生成的页面组件

插件会为每个路由自动生成页面组件。如果模板目录存在，则使用模板创建页面；否则使用默认模板。

路径会按照以下规则转换为组件路径：

• 例如：/system/user 会转换为 ./System/User
• 组件名称会自动从路径中提取并格式化

许可证

MIT