微前端中vue动态路由采用分层管理+协议对齐+运行时挂载，主应用按权限动态注册子应用前缀路由并提供壳容器，子应用通过工厂函数支持base path注入，跨应用跳转由主应用中转校验。
在微前端架构中，Vue 动态路由要实现主应用与子应用路由的动态拼接，核心不是“把所有路由塞进同一个 router 实例”，而是**分层管理 + 协议对齐 + 运行时挂载**。主应用负责全局导航和入口调度，子应用只管自己内部路由；两者通过约定路径前缀、权限标识和通信机制协同工作，而不是强行合并路由表。
主应用侧：按子应用注册路由前缀并预留动态占位
主应用不直接加载子应用的完整路由配置，而是为每个子应用分配一个唯一且稳定的 base path（如 /app/user-center、/app/finance），并在主路由中预先声明“壳路由”：
- 用
path: '/app/:subApp'或精确前缀（如/app/user-center/*）匹配子应用入口 - 对应组件是一个轻量级容器（如
<microappwrapper></microappwrapper>），负责加载、挂载、卸载子应用 - 该容器不渲染具体页面，只作为子应用运行沙箱，其内部路由由子应用自身 Vue Router 管理
子应用侧：声明独立路由 + 支持 base path 动态注入
子应用需具备“可配置 base path”的能力，避免硬编码 createWebHistory('/')：
Vue Composition Analyzer
下载
分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……
- 导出一个
createRouter工厂函数，接收base参数（由主应用传入） - 子应用启动时，主应用通过 props 或生命周期钩子（如 qiankun 的
props）传入实际 base 路径 - 子应用路由实例使用
createWebHistory(base)，确保其内部router.push('/list')解析为/app/user-center/list
权限驱动的动态挂载：主应用按需注册子应用路由节点
当用户登录后，主应用从权限接口获取其可访问的子应用列表及对应菜单项，再生成“虚拟路由节点”用于菜单渲染和导航跳转：
- 后端返回的权限数据含
{ subAppName: 'user-center', path: '/app/user-center', name: '用户中心', icon: 'user' } - 主应用将这些数据映射为菜单项，并在点击时触发
loadAndMountSubApp('user-center') - 若需支持浏览器前进/后退或刷新保持状态，主应用监听 URL 变化，识别前缀后自动加载对应子应用（无需提前注册全部子路由）
跨子应用跳转：通过主应用中转而非直接路由 push
子应用不能直接调用 router.push('/app/finance/dashboard')，因为它的 router 不知道其他子应用的路径结构：
- 子应用内发起跨应用跳转时，应调用主应用提供的全局方法（如
window.__MICRO_APP_NAVIGATE({ to: '/app/finance/dashboard' })） - 主应用捕获该调用，校验权限后执行
router.push()，并触发对应子应用加载逻辑 - 也可基于事件总线或自定义消息机制（如 postMessage）解耦通信，避免强依赖全局变量
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
