ESModule通过动态import()结合角色映射表实现按角色动态加载权限路由模块。预定义各角色路由模块，建立角色到静态模块路径的映射，再用import()加载对应模块并注册路由，最后在权限守卫中触发加载确保按需与安全。
ESModule 本身不支持运行时动态加载模块路径（如 import('./modules/' + role + '/routes.js') 这类字符串拼接），但可以通过 动态 import() + 路由配置中心化 + 角色映射表 实现按角色动态加载权限路由模块。核心不是“动态 import 某个角色专属文件”，而是“根据角色名，确定要 import 哪个预定义的路由模块”，再注入到路由系统中。
1. 预定义角色路由模块（每个角色一个 ESModule）
将不同角色的路由配置拆分为独立模块，导出标准的路由数组（符合 Vue Router / React Router / 路由库要求的格式）：
// routes/admin.js
export default [
{ path: '/admin/users', component: () => import('@/views/admin/Users.vue') },
{ path: '/admin/roles', component: () => import('@/views/admin/Roles.vue') }
]
// routes/editor.js
export default [
{ path: '/editor/articles', component: () => import('@/views/editor/Articles.vue') },
{ path: '/editor/drafts', component: () => import('@/views/editor/Drafts.vue') }
]
// routes/guest.js
export default [
{ path: '/home', component: () => import('@/views/Home.vue') }
]
2. 建立角色与路由模块的映射关系
在权限初始化阶段，根据用户角色（如后端返回的 role: 'admin'），查表决定加载哪个模块：
- 用对象字面量或 Map 显式声明角色 → 模块路径的映射，避免字符串拼接带来的路径风险
- 确保所有角色都覆盖，未匹配角色走默认路由（如 guest）
- 模块路径必须是静态字符串，才能被构建工具（Vite/Webpack）正确打包和分析
3. 使用 dynamic import 加载对应模块并注册路由
拿到模块路径后，调用 import() 加载，然后将导出的路由数组添加到路由实例中：
立即学习“Java免费学习笔记（深入）”；
// 示例（以 Vue Router 4 为例）
import { createRouter } from 'vue-router'
const router = createRouter({ routes: [] }) // 初始空路由
const roleRoutesMap = {
admin: () => import('./routes/admin.js'),
editor: () => import('./routes/editor.js'),
guest: () => import('./routes/guest.js')
}
async function loadRoleRoutes(role) {
const routeModule = roleRoutesMap[role] || roleRoutesMap.guest
const routes = await routeModule()
router.addRoute(...routes.default) // 或 router.addRoutes(routes.default)
}
注意：Vue Router 4 的 addRoute 是单条添加，需遍历；React Router v6+ 推荐用 useRoutes 动态生成路由树，再替换整个 element。
4. 权限守卫中触发加载（推荐时机）
不要在登录页就加载全部角色模块，而应在获取用户角色信息后、进入主布局前执行：
- 登录成功后，从 token 或 API 响应中解析角色
- 调用
loadRoleRoutes(role)加载并注册 - 再跳转到首页或上次访问页面（此时路由已就位）
- 配合路由守卫（如
router.beforeEach）做权限校验，未授权则重定向
这样既保证按需加载，又避免路由未注册导致 404。
