Skip to main content

Routing

I. System Routing Overview​

The system routing is based on the Elegant Router plugin. Please refer to the plugin documentation for detailed usage.

II. Important Warning​

Since the <Transition> tag is used to support page transition animations, the template in the page's .vue file must have only one root element. Comments and plain text are not allowed at the root level. Related docs: Transition | Vue.js

III. Auto-generated Routing​

After starting the project, the plugin automatically generates the src/router/elegant directory. Files in this directory contain auto-generated route imports, definitions, and transformations.

Important

  • Routes are byproducts of files, so deleting a route means deleting the file; the route will disappear with the file.
  • Only component and meta info in routes can be modified. Auto-generation will not affect these two properties.

IV. Configuration Properties​

1. RouteKey Type​

Explanation: The union type RouteKey declares all route keys for unified management. This type is automatically generated by Elegant Router based on files under views.

Code Location: src/typings/elegant-router.d.ts

2. RoutePath Type​

Explanation: Route path, corresponding one-to-one with RouteKey.

3. RouteMeta Interface​

interface RouteMeta {
  /** Route title, used in document title */
  title: string;

  /** I18n key for the route. If set, it will be used for i18n and title will be ignored */
  i18nKey?: App.I18n.I18nKey;

  /** Role list for the route. User needs at least one role to access. Empty means no permission required */
  roles?: string[];

  /** Whether to cache the route */
  keepAlive?: boolean;

  /** Whether it is a constant route (no login required, defined in frontend) */
  constant?: boolean;

  /** Iconify icon, used in menu or breadcrumb */
  icon?: string;

  /** Local icon, exists in "src/assets/svg-icon". If set, ignores icon property */
  localIcon?: string;

  /** Route sort order */
  order?: number;

  /** External link */
  href?: string;

  /** Whether to hide in menu */
  hideInMenu?: boolean;

  /** Active menu key when entering this route (if this route is not in menu) */
  activeMenu?: import('@elegant-router/types').RouteKey;

  /** By default, routes with same path share a tab. If true, uses multiple tabs */
  multiTab?: boolean;

  /** If set, route will be fixed in tabs. Value represents order (Home is special, always fixed) */
  fixedIndexInTab?: number;

  /** Route query params, carried automatically when clicking menu */
  query?: { key: string; value: string }[] | null;
}

4. Usage Tips​

  1. Get Icons: You can get icons from icones.js.org.

  2. Hide Menu Item: If you create a route page in views but want to hide it from the menu (e.g., accessed from elsewhere), set hideInMenu: true in meta.

Example:

{
    name: '403',
    path: '/403',
    component: 'layout.blank$view.403',
    meta: {
      title: '403',
      i18nKey: 'route.403',
      hideInMenu: true
    }
}