动态挂载路由的核心是用后端分类数据驱动路由生成：1. 通过接口获取分类，统一通配路径；2. 登录后动态注册子路由并挂载；3. 复用CategoryList.vue组件，按参数加载数据；4. 刷新时检查路由存在性并重生成，兜底处理无效路径。
在资产管理系统中，动态挂载路由的核心不是“按分类写死一堆路由”，而是把资产分类作为元数据驱动路由生成——分类来自后端接口，路由结构统一，组件复用，避免硬编码每类资产的路径。
1. 分类数据驱动路由配置
后端提供标准分类接口（如 /api/assets/categories），返回结构类似：
- id: "server"
- name: "服务器"
- icon: "server-icon"
- permissionCode: "asset:server:list"
前端不预设 /server、/network 等具体路径，而是用通配模式统一处理：
{ path: '/assets/:category', component: AssetListLayout, children: [ { path: '', component: () => import('@/views/assets/CategoryList.vue') } ] }
2. 动态注册分类级子路由
登录后拉取分类列表，遍历生成带 meta 的子路由并 addRoute：
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
立即学习“前端免费学习笔记（深入）”；
- 每个分类对应一个
router.addRoute('assets', { path: category.id, name: `Asset${capitalize(category.id)}`, component: AssetDetail, meta: { category, title: category.name } }) - 所有子路由挂载到主路由
path: '/assets'下，保持层级清晰 - 菜单渲染直接遍历
router.getRoutes().filter(r => r.meta.category)，确保菜单与路由完全一致
3. 统一组件 + 动态参数识别
所有资产列表页共用 CategoryList.vue，通过 $route.params.category 获取当前分类 ID：
- 自动请求
/api/assets?category=server - 自动读取
route.meta.category.icon渲染菜单图标 - 权限校验走
meta.permissionCode，配合全局守卫拦截无权访问
4. 刷新时保活与兜底处理
页面刷新后分类路由丢失？在 router.beforeEach 中检查：
- 已登录但
router.hasRoute('AssetServer')为 false → 重新拉分类、重生成路由 - 访问
/assets/unknown且无匹配路由 → 重定向到首页或展示空状态，不抛 404 - 使用
next({ ...to, replace: true })触发二次导航，保证路由表就绪后再跳转
不复杂但容易忽略
