# 路由配置

本项目使用自动导入路由模块的方式，无需手动在路由文件中引入。

## 路由文件位置

所有路由配置文件位于 `src/router/modules/` 目录下，每个 `.ts` 文件会被自动导入。

::: warning 排除文件
`remaining.ts` 文件不会被自动导入，用于配置不参与菜单的路由。
:::

## 路由配置结构

创建文件 `src/router/modules/{模块名}.ts`，参考以下结构：

```typescript
export default {
  path: '/demand',                    // 路由路径
  redirect: '/demand/list',           // 默认重定向
  meta: {
    icon: 'ep/document',              // 菜单图标
    title: '需求管理',                // 菜单标题
    rank: 1                           // 菜单排序权重
  },
  children: [
    {
      path: '/demand/list',           // 列表页路径
      name: 'DemandList',             // 路由名称（必须唯一）
      component: () => import('@/views/demand-list.vue'),
      meta: {
        title: '需求列表',
        keepAlive: true               // 开启页面缓存
      }
    },
    {
      path: '/demand/detail',         // 详情页路径
      name: 'DemandDetail',
      component: () => import('@/views/demand-detail.vue'),
      meta: {
        title: '需求详情'
      }
    }
  ]
} satisfies RouteConfigsTable;
```

## Meta 配置说明

### 一级路由 Meta

| 属性 | 类型 | 说明 |
|-----|------|-----|
| `title` | `string` | 菜单标题，必填 |
| `icon` | `string` | 菜单图标，使用 Element Plus 图标，如 `ep/document` |
| `rank` | `number` | 菜单排序权重，数字越小越靠前 |
| `showLink` | `boolean` | 是否在菜单中显示，默认 `true` |

### 子路由 Meta

| 属性 | 类型 | 默认值 | 说明 |
|-----|------|--------|-----|
| `title` | `string` | - | 页面标题，必填 |
| `keepAlive` | `boolean` | `false` | 是否开启页面缓存 |
| `showLink` | `boolean` | `true` | 是否在菜单中显示 |
| `auths` | `string[]` | - | 权限标识，用于按钮级权限控制 |

## 常用配置示例

### 列表页路由

```typescript
{
  path: '/user/list',
  name: 'UserList',
  component: () => import('@/views/user/list.vue'),
  meta: {
    title: '用户列表',
    keepAlive: true    // 列表页通常需要缓存
  }
}
```

### 详情页路由

```typescript
{
  path: '/user/detail',
  name: 'UserDetail',
  component: () => import('@/views/user/detail.vue'),
  meta: {
    title: '用户详情'
    // 详情页通常不需要缓存
  }
}
```

### 隐藏菜单项

```typescript
{
  path: '/system/config',
  name: 'SystemConfig',
  component: () => import('@/views/system/config.vue'),
  meta: {
    title: '系统配置',
    showLink: false    // 不在菜单中显示，但可以访问
  }
}
```

### 嵌套路由

```typescript
export default {
  path: '/system',
  meta: {
    icon: 'ep/setting',
    title: '系统管理',
    rank: 10
  },
  children: [
    {
      path: '/system/user',
      name: 'SystemUser',
      component: () => import('@/views/system/user.vue'),
      meta: { title: '用户管理' }
    },
    {
      path: '/system/role',
      name: 'SystemRole',
      component: () => import('@/views/system/role.vue'),
      meta: { title: '角色管理' }
    }
  ]
} satisfies RouteConfigsTable;
```

## 注意事项

::: warning 路由名称唯一性
每个路由的 `name` 属性必须全局唯一，不能重复。
:::

::: tip 组件路径
`component` 使用动态导入 `() => import('@/views/xxx.vue')`，路径必须以 `@/views/` 开头。
:::

::: warning 自动导入原理
路由使用 `import.meta.glob` 自动导入，文件创建后无需手动引入，项目会自动识别。
:::