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, and neither annotations nor plain text can be used, there must be only one root element. Related Documents： Transition | Vue.js (vuejs.org)

Auto-generation

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

IMPORTANT

Routing is a byproduct of files, so deleting a route is deleting a file, and the route will disappear along with the file.
The only content that can be modified by routing is the 'components' and' meta 'information, and the automatically generated operation will not affect these two properties.

Configuration properties

1. type RouteKey

Explanation:

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

Code location

src/typings/elegant-router.d.ts

2. type RoutePath

Explanation:

The path of the route, this type corresponds one-to-one with RouteKey

3. type RouteMeta

// Route meta information interface
interface RouteMeta {
  /**
   * Route title
   *
   * Can be used in the document title
   */
  title: string;
  /**
   * The internationalization key of the route
   *
   * If set, it will be used for i18n, and the title will be ignored at this time
   */
  i18nKey?: App.I18n.I18nKey;
  /**
   * The role list of the route
   *
   * When the current user has at least one role, the route is allowed to be accessed. When the role list is empty, it means no permission is required
   */
  roles?: string[];
  /** Whether to cache this route */
  keepAlive?: boolean;
  /**
   * Whether it is a constant route
   *
   * No login is required, and the route is defined on the front end
   */
  constant?: boolean;
  /**
   * Iconify icon
   *
   * Can be used in the menu or breadcrumbs
   */
  icon?: string;
  /**
   * Local icon
   *
   * Located in the "src/assets/svg-icon" directory, if set, the icon property will be ignored
   */
  localIcon?: string;
  /** Route sorting order */
  order?: number;
  /** The external link of the route */
  href?: string;
  /** Whether to hide this route in the menu */
  hideInMenu?: boolean;
  /**
   * The menu key activated when entering this route
   *
   * This route is not in the menu
   *
   * @example
   *   Suppose the route is "user_detail", if set to "user_list", the "User List" menu item will be activated
   */
  activeMenu?: import('@elegant-router/types').RouteKey;
  /** By default, routes with the same path share a tab. If set to true, multiple tabs are used */
  multiTab?: boolean;
  /** If set, the route will be displayed fixed in the tab, and its value represents the order of the fixed tab.(The home page is special, it will automatically stay fixed) */
  fixedIndexInTab?: number;
  /** if set query parameters, it will be automatically carried when entering the route */
  query?: { key: string; value: string }[] | null;
}

Tip

Get the icon value from here: https://icones.js.org/

Note

If you create a route page in views, call it elsewhere but do not show it in the menu, then you need to set hideInMenu: true in meta

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