新增页面与动态路由

Forge 前端使用 Vue Router 配合动态路由生成机制。你需要在 src/views 下创建页面，并在菜单管理中配置路由。

创建页面

在 src/views/ 下按模块创建目录和 index.vue：

src/views/
├── system/
│   ├── user/
│   │   └── index.vue      # 用户管理
│   ├── role/
│   │   └── index.vue      # 角色管理
│   └── dict/
│       └── index.vue      # 字典管理
└── biz/
    └── order/
        └── index.vue      # 订单管理

页面模板

<template>
  <div class="p-4">
    <AiCrudPage :api-config="apiConfig" :schema="schema" />
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'

const apiConfig = {
  page: 'GET@/biz/order/page',
  get: 'GET@/biz/order/:id',
  add: 'POST@/biz/order',
  edit: 'PUT@/biz/order',
  delete: 'DELETE@/biz/order/:id'
}

const schema = computed(() => [
  { field: 'orderNo', label: '订单号', component: 'NInput' },
  { field: 'amount', label: '金额', component: 'NInputNumber' },
  { field: 'status', label: '状态', component: 'DictSelect', dictType: 'biz_order_status' }
])
</script>

路由配置

Forge 使用动态路由，路由表从后端菜单接口加载。你不需要在代码中手动注册路由，而是在菜单管理中配置。

菜单管理

在系统管理的菜单管理页面新增菜单：

配置项	说明	示例
菜单名称	显示名称	订单管理
路由地址	URL 路径	biz/order
组件路径	views 下的路径	biz/order/index
权限标识	Sa-Token 权限	biz:order:list
菜单类型	目录/菜单/按钮	菜单

路由匹配

菜单中配置：组件路径 = biz/order/index
→ 自动加载：src/views/biz/order/index.vue

路由守卫

路由守卫在 src/router/guards.ts 中配置：

router.beforeEach(async (to, from, next) => {
  const userStore = useUserStore()

  if (to.path === '/login') {
    next()
    return
  }

  if (!userStore.token) {
    next('/login')
    return
  }

  // 首次进入，加载动态路由
  if (!userStore.routes.length) {
    await userStore.generateRoutes()
    next({ ...to, replace: true })
    return
  }

  next()
})

静态路由

部分基础路由（如登录页、404 页）在 src/router/index.ts 中静态注册：

const routes = [
  {
    path: '/login',
    name: 'Login',
    component: () => import('@/views/login/index.vue')
  },
  {
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    children: [
      {
        path: 'dashboard',
        name: 'Dashboard',
        component: () => import('@/views/dashboard/index.vue')
      }
    ]
  }
]

新增页面步骤

1. 在 src/views/ 下创建页面文件 index.vue
2. 在菜单管理中配置菜单（路由地址、组件路径、权限标识）
3. 在角色管理中给角色分配菜单权限
4. 前端刷新后动态路由自动加载新页面

注意事项

• 组件路径不包含 src/views/ 前缀和 .vue 后缀
• URL 占位符使用冒号格式 :id，不是花括号 {id}
• 权限标识与后端 @SaCheckPermission 注解值保持一致