Home
Guide
API
Develop
Plugins
Roadmap
Contribution
Home
Guide
API
Develop
Plugins
Roadmap
Contribution

路由

通过 app.router.add()和 app.systemSettingsManager.add()可分别扩展普通页面和系统设置页，具体实现如下：

一、普通页面扩展

通过app.router.add()方法可动态添加常规页面路由，支持多级路由结构：

1this.app.router.add('路由名称', {
2  path: '/路径', // 路由路径（支持动态参数）
3  element: <组件 />, // 页面组件（支持React组件或Outlet）
4  exact: true, // 是否严格匹配路径
5  title: '页面标题', // 页面标题（可选）
6  icon: '图标名称', // 页面图标（可选）
7})
  • 路由路径支持层级结构（如 root.home ）
  • 可通过 app.router.getRoutes() 查看所有已注册路由

示例1：创建首页路由

1this.app.router.add('home', {
2  path: '/',
3  element: <HomeComponent />,
4  title: '首页',
5  icon: 'HomeOutlined',
6})

示例2：多级路由配置

1class MyPlugin extends Plugin {
2  async load() {
3    // 添加根路由布局
4    this.app.router.add('root', {
5      element: <Layout />,
6    })
7
8    // 添加子页面路由
9    this.app.router.add('root.home', {
10      path: '/',
11      element: <Home />,
12    })
13    this.app.router.add('root.about', {
14      path: '/about',
15      element: <About />,
16    })
17  }
18}

二、系统设置页扩展

通过 app.systemSettingsManager.add() 方法可注册系统专属设置页：

1class HelloPlugin extends Plugin {
2  async load() {
3    // 注册顶级设置页
4    this.app.systemSettingsManager.add('hello', {
5      title: 'Hello',
6      icon: 'ApiOutlined',
7      Component: HelloSettingPage,
8    })
9
10    // 注册多级子设置页
11    this.app.systemSettingsManager.add('hello.demo1', {
12      title: 'Demo1 Page',
13      Component: () => <div>Demo1 Content</div>,
14    })
15    
16    this.app.systemSettingsManager.add('hello.demo2', {
17      title: 'Demo2 Page',
18      Component: () => <div>Demo2 Content</div>,
19    })
20  }
21}
  • 路由路径自动挂载到/_admin/:name下
  • 支持通过系统设置界面统一管理设置页

三、初始路由说明

默认已注册以下路由：

名称路径组件说明
admin/admin/*AdminLayout后台管理主页
admin.page/admin/:nameAdminDynamicPage动态页面入口
admin-settings/_admin/:nameAdminSettingsLayout系统配置页入口

四、扩展建议

  1. 命名规范：建议使用 pluginName.feature 格式命名路由（如hello.demo1）
  2. 组件复用：可通过Outlet组件实现多级页面嵌套
  3. 图标配置：支持使用Ant Design图标库（如ApiOutlined）

通过上述方法，可灵活实现页面扩展与插件功能集成。

ON THIS Page