路由配置

XinAdmin 前端采用基于 React Router 的动态路由系统，支持权限控制的路由加载和多层级菜单结构。路由系统通过后端返回的菜单数据动态生成，实现了灵活的权限管理和菜单配置。

路由类型

系统定义了三种主要的路由类型，以满足不同的业务需求：

menu: 菜单类型，用于生成导航菜单，不直接对应页面
route: 路由类型，对应具体的页面组件，可以在菜单中显示
nested-route: 嵌套路由类型，用于在同一父级路由下展示多个子页面

每种类型都有特定的用途和配置方式，通过合理的组合可以构建复杂的页面结构。

路由配置结构

路由配置基于 IMenus 接口定义，主要包含以下属性：

type: 路由类型（menu、route、nested-route）
key: 路由的唯一标识符
name: 路由名称
path: 路由路径
elementPath: 对应的页面组件路径
icon: 菜单图标
order: 排序权重
local: 国际化标识
hidden: 是否隐藏
link: 是否为外链
children: 子路由数组

以下是一个典型的路由配置示例：

{
  type: "menu",
  key: "dashboard",
  name: "仪表盘",
  path: "",
  icon: "PieChartOutlined",
  elementPath: "",
  order: 0,
  local: "menu.dashboard",
  hidden: 1,
  link: 0,
  children: [
    {
      type: "route",
      key: "dashboard.analysis",
      name: "分析页",
      path: "/dashboard/analysis",
      icon: "PieChartOutlined",
      elementPath: "/dashboard/analysis",
      order: 0,
      local: "menu.analysis",
      hidden: 1,
      link: 0
    }
  ]
}

路由守卫与权限控制

路由系统集成了权限控制机制，确保用户只能访问被授权的路由：

通过用户的角色和权限动态过滤路由
验证用户对特定路由的访问权限
未授权访问时重定向到403页面
支持页面级和按钮级权限控制

嵌套路由

系统支持嵌套路由结构，特别适用于具有多个子页面的复杂功能模块。嵌套路由通过在父路由组件中使用 <Outlet> 组件来渲染子路由内容。嵌套路由也是动态生成的，基于后端返回的菜单数据。

路由定义

在 XinAdmin 中，嵌套路由通过 nested-route 类型的菜单项来定义。

{
  type: "route",
  key: "example",
  name: "主页面",
  path: "/example",
  elementPath: "/example/index",
  children: [
    {
      type: "nested-route",
      key: "example.tab1",
      name: "基本信息",
      path: "/example/tab1",
      elementPath: "/example/tab1",
    },
    {
      type: "nested-route",
      key: "example.tab2",
      name: "安全设置",
      path: "/example/tab2",
      elementPath: "/example/tab2",
    }
  ]
}

在路由生成过程中，当检测到 nested-route 类型的子菜单时，系统会自动创建嵌套路由结构

页面示例

// 主页面 /example/index.tsx

import {Outlet} from 'react-router';

export default () => {

  return (
    <>
      example主页面
      <a href="/example/tab1"> 页面1 </a>
      <a href="/example/tab2"> 页面2 </a>
      <Outlet>
    </>
  )
}

// 嵌套页面 tab1， /example/tab1.tsx

export default () => {
  return (
    <>
      tab1
    </>
  )
}

// 嵌套页面 tab2， /example/tab2.tsx

export default () => {
  return (
    <>
      tab2
    </>
  )
}

通过这种灵活的路由系统，XinAdmin 能够支持复杂的业务场景，同时保持良好的性能和用户体验。

ON THIS PAGE

路由配置#

路由类型#

路由配置结构#

路由守卫与权限控制#

嵌套路由#

路由定义#