本页目录
路由对象idroutepathtabBar 对象

路由配置

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

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

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

路由对象

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

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

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

id

路由唯一标识，可选。

route

路由路径表达式，必填。

表达式应符合 path-to-regexp 规范

path

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

tabBar 对象

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

通过 export const tabBar = {} 导出。

其约束如下：

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 文件，则对应的配置为:

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