---
title: 路由配置
summary: "介绍 Ray 路由配置文件 routes.config.ts 中路由对象定义和 tabBar 导航栏的配置方式。"
tags: [Ray路由配置routes.config.ts, 路由对象route与path定义, tabBar导航栏配置]
questions:
  - routes.config.ts 中路由对象的 route 和 path 分别代表什么？
  - 路由路径表达式支持动态参数吗？如 /detail/:uid 这种格式？
  - 如何在 routes.config.ts 中配置 tabBar 导航栏？
  - tabBar 的 icon 和 activeIcon 支持网络图片吗？路径格式是什么？
  - 多个路由的优先级匹配规则是什么？后面的会覆盖前面的吗？
  - tabBar 的 list 中 id 和 route 字段如何与 routes 关联？
  - 路由表达式应符合什么规范？
---

# 路由配置

用于描述应用中页面的路径表达式及应用 TabBar（如有）的信息。配置文件 `src/routes.config.ts` 格式如下：

```ts
import { Routes, TabBar } from '@ray-js/types';

export const routes: Routes = [];
export const tabBar: TabBar = {};
```

## 路由对象

通过 `export const routes = []` 声明导出。一个完整的路由对象如下：

```js
{
  id: 'detail',
  route: '/detail/:uid',
  path: '/pages/detail/index',
}
```

注意: 路由以后面覆盖前面的优先级顺序匹配，开发者应自行保证路由的优先级关系。

### id

路由唯一标识，可选。

### route

路由路径表达式，必填。

> 表达式应符合 [path-to-regexp](https://github.com/pillarjs/path-to-regexp) 规范

### path

路由页面组件地址，必填。

## tabBar 对象

用于描述应用 tabBar 导航栏菜单项。

通过 `export const tabBar = {}` 导出。

其约束如下：

```ts
type TabBar = {
  /**
   * 导航文本色
   */
  textColor?: string;
  /**
   * 导航文本高亮色
   */
  selectedColor?: string;
  /**
   * 导航栏背景色
   */
  backgroundColor?: string;
  /**
   * 导航栏列表
   */
  list?: RequireOnlyOne<
    {
      text: string; // 导航项的名称
      icon?: string; // 导航项图标
      activeIcon?: string; // 导航项高亮图标
      id: string; //  与 routes 一一对应（如有）
      route: string;
    },
    'id' | 'route'
  >[];
};
```

其中 icon 和 activeIcon 仅支持本地图片, 且图片为绝对地址。

例如: 在根目录下创建 `public/images/tabbar/home.png` `public/images/tabbar/home-active.png` 文件，则对应的配置为:

```json
{
  "icon": "/images/tabbar/home.png",
  "activeIcon": "/images/tabbar/home-active.png"
}
```