System Routing

The routing of this system is based on the plugin Elegant Router. For detailed usage, please refer to the plugin documentation.

DANGER

Since the <Transition> tag is used to support page transition animations, there can only be one root element in the template of the .vue file. Neither comments nor plain text are allowed — there must be only one root element.

Auto-generation

After starting the project, the plugin will automatically generate the src/router/elegant directory. The files in this directory are automatically generated for route import, route definition, and route conversion.

IMPORTANT

Routing is a byproduct of files, so deleting a route means deleting a file, and the route will disappear along with the file. The only content that can be modified by routing is the component and meta information.

Configuration Properties

RouteKey

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

Code location

src/typings/elegant-router.d.ts

RouteMeta

interface RouteMeta {
  /** Route title, can be used in the document title */
  title: string;
  /** The i18n key of the route. If set, title will be ignored */
  i18nKey?: App.I18n.I18nKey;
  /** Role list that can access this route. Empty means no restriction */
  roles?: string[];
  /** Whether to cache this route */
  keepAlive?: boolean;
  /** Whether it is a constant route (no login required) */
  constant?: boolean;
  /** Iconify icon for menu or breadcrumb */
  icon?: string;
  /** Local icon in "src/assets/svg-icon". Overrides icon property */
  localIcon?: string;
  /** Route sorting order */
  order?: number;
  /** External link URL */
  href?: string;
  /** Whether to hide in the menu */
  hideInMenu?: boolean;
  /** The menu key activated when entering this route */
  activeMenu?: import('@elegant-router/types').RouteKey;
  /** If true, the same path can open multiple tabs */
  multiTab?: boolean;
  /** Fixed position index in the tab bar */
  fixedIndexInTab?: number;
  /** Auto-carried query parameters when entering the route */
  query?: { key: string; value: string }[] | null;
}

TIP

Get icon values from icones.js.org

Note

If you create a route page in views that should not appear in the menu, set hideInMenu: true in meta:

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