#Configure Route

Describes the page route expression and TabBar (if any) for an app. The configuration file src/routes.config.ts is managed in the following format:

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

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

#Route object

You can export a route object in this declaration export const routes = []. The following example shows a complete route object:

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

Note: For the routes with the same ID, the latest one will overwrite the earlier ones. Make sure the routes are prioritized as required.

#id

The unique ID of a route. This setting is optional.

#route

The path expression of a route. This setting is required.

The expression must follow the rules specified in path-to-regexp.

#path

The address of the target page component. This setting is required.

#tabBar object

Describes the menu items in a navigation bar specified by tabBar.

You can export the object in this declaration export const tabBar = {}.

Comply with the following constraints:

type TabBar = {
  /**
   * The text color in a navigation bar.
   */
  textColor?: string;
  /**
   * The highlighted text color in a navigation bar.
   */
  selectedColor?: string;
  /**
   * The background color of the navigation bar.
   */
  backgroundColor?: string;
  /**
   * The list in the navigation bar.
   */
  list?: RequireOnlyOne<
    {
      text: string; // The name of a menu item in the navigation bar.
      icon? : string; // The icon of a menu item in the navigation bar.
      activeIcon? : string; // The highlighted icon of a menu item in the navigation bar.
      id: string; // Corresponds with `routes` if this setting is provided.
      route: string;
    },
    'id' | 'route'
  >[];
};

The icon and activeIcon properties only support local images, and the image paths should be absolute addresses.

For example, if you create the files public/images/tabbar/home.png and public/images/tabbar/home-active.png in the root directory, the corresponding configuration would be:

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