Frontend Routing Specification

Routing Organization Architecture

apps/web-antd/src/router/

apps/web-antd/src/router/
├── access.ts        # 菜单权限、动态路由生成逻辑，与后端交互生成可访问菜单
├── guard.ts         # 路由守卫（加载进度、权限校验、NProgress 等）
├── index.ts         # Router 实例创建及初始化入口
├── routes/          # 路由配置目录
│   ├── core.ts      # 基础/核心路由（登录、404兜底、Root重定向，无权限校验）
│   ├── index.ts     # 路由聚合与扁平化输出
│   └── modules/     # 页面模块化的静态/动态辅助路由配置文件
└── tongji.ts        # 统计配置

Routing Definition Specification

1. Combination of Automatic and Dynamic Parsing

vue-vben-admin

• Pull the menu items that the front-end has permission to access through the back-end API (

  getAuthPermissionInfoApi

  reads the menu tree).
• Automatically map page components according to the

  componentKeys

  provided by

  apps/web-antd/src/views/**/*.vue

  .
• If a specific page needs to be configured with front-end static routing, place it under

  routes/modules/

  .

2. Frontend Static Auxiliary Routing Writing (

routes/modules/*.ts

)

modules

import type { RouteRecordRaw } from 'vue-router';
import { $t } from '#/locales';

const routes: RouteRecordRaw[] = [
  {
    path: '/system/notify-message',
    component: () => import('#/views/system/notify/my/index.vue'),
    name: 'MyNotifyMessage',
    meta: {
      title: '我的站内信',
      icon: 'ant-design:message-filled',
      hideInMenu: true,
    },
  },
];

export default routes;

3. Route Meta Meta Information Specification

RouteMeta

• title

  : Page title, try to use

  $t('page.xxx')

  internationalization, or business-readable Chinese.

• icon

  : Menu icon (using icon sets supported by Iconify).

• hideInMenu

  :

  boolean

  , whether to hide the page in the sidebar/top menu.

• hideInBreadcrumb

  :

  boolean

  , whether to hide in the breadcrumb.

• hideInTab

  :

  boolean

  , whether not to display in the multi-tab page.

• affixTab

  :

  boolean

  , whether to fix it in the multi-tab page (such as Dashboard).

• ignoreAccess

  :

  boolean

  , whether to ignore permission control.

Routing Guard Logic (

guard.ts

)

• Progress bar: Processed by

  loadedPaths

  , the loaded page will not trigger long-time NProgress twice when switching.
• Login verification: Routes not in the whitelist will force verification of

  accessStore.accessToken

  , and jump to

  /auth/login

  if not logged in.
• Permission pulling and dynamic mounting: If it is recognized that you are logged in but

  isAccessChecked

  is

  false

  , trigger

  fetchUserInfo()

  , and write the dynamically parsed route into

  vue-router

  through

  generateAccess

  .

Constraint Tips

• It is forbidden to add business pages arbitrarily in

  router/routes/core.ts

  . All business function pages must go through permission verification, or be stored in

  routes/modules/

  as a separate module.
• Path naming style: Try to keep it lowercase, and use hyphens to splicing multiple words. For example

  /system/user-role

  .
• View association: Do not manually write import components with very deep levels, rely on

  () => import('#/views/...')

  to implement lazy loading of routing view components.