Vue动态路由需四步闭环：接收后端JSON→转换组件路径为异步加载函数→登录后拦截注册→菜单与路由共用数据源。关键在component字符串转import()、守卫中按需注入、菜单遍历已注册路由并保持name和嵌套一致。
Vue 动态路由结合后端返回的 JSON 生成路由表，核心在于“接收 → 转换 → 注册 → 渲染”四步闭环。不是简单把 JSON 塞进 router.addRoutes() 就完事，关键要处理组件懒加载、嵌套路由、元信息映射和守卫拦截逻辑。
后端返回的 JSON 要有明确结构
后端需提供符合前端解析习惯的扁平或树形路由配置，推荐树形（支持菜单层级）：
-
path：必须，如
"/user" - name：建议唯一，用于编程式导航和 keep-alive 缓存
-
component：字符串路径，如
"views/user/UserList.vue"（非真实组件引用） -
meta：含
title、icon、hideInMenu等展示/权限控制字段 - children：子路由数组，用于递归处理嵌套菜单和路由
示例（简化）：
{
"path": "/system",
"name": "System",
"meta": { "title": "系统管理", "icon": "setting" },
"component": "layout/Layout",
"children": [
{
"path": "user",
"name": "UserList",
"meta": { "title": "用户列表" },
"component": "views/system/UserList.vue"
}
]
}
前端要把字符串 component 转成真正的异步组件
后端传的是路径字符串，但 Vue Router 需要的是 import() 返回的 Promise。必须写一个转换函数：
立即学习“前端免费学习笔记（深入）”；
- 用
require.context（Vue 2）或import.meta.glob（Vue 3）提前收集所有页面组件模块 - 根据后端传入的
component字符串，动态匹配并返回() => import(...)函数 - 注意路径拼接规范（如统一加
src/前缀，或约定相对views/）
Vue 2 示例（router/utils.js）：
const modules = require.context('@/views', true, /\.vue$/);
export function resolveComponent(path) {
const key = path.replace(/^\.\/|\.vue$/g, '');
return () => modules(`./${key}.vue`);
}
用 router.beforeEach 拦截首次访问，动态注册路由
不能在应用启动时就调 addRoutes（此时还没登录、没权限数据），而应在登录成功后、跳转前完成注入：
- 判断
to.name === undefined或to.path === '/login'，放行登录页 - 检查 Vuex/Pinia 中是否已加载过动态路由（避免重复添加）
- 若未加载，调接口获取路由 JSON → 递归转换 → 合并进默认路由 →
router.addRoute()（Vue 3）或router.addRoutes()（Vue 2） - 最后
next({ ...to, replace: true })替换当前导航，触发新路由匹配
侧边栏菜单和路由保持一致
菜单不是另写一套数据，而是直接遍历已注册的路由（过滤掉 meta.hideInMenu === true 的项）：
- 从
router.options.routes（Vue 2）或router.getRoutes()（Vue 3）中提取有效菜单项 - 递归展平
children，保留层级关系用于 el-menu 或自定义菜单组件 - 点击菜单时用
router.push({ name: item.name })，确保与路由系统联动
不复杂但容易忽略：菜单高亮依赖 route.matched，所以动态添加的路由必须正确设置 name 和嵌套关系，否则激活状态会失效。
