计算属性本身不参与微前端路由调度，仅作为响应式语法糖推导子应用映射；真正调度依赖路由路径、应用标识与运行时上下文的动态判断，结合路由守卫实现无感知挂载卸载及服务端兜底。
计算属性名本身不直接参与微前端路由调度，它属于 Vue 响应式系统中的语法糖，用于派生状态；真正起作用的是基于路由路径、应用标识和运行时上下文的动态判断逻辑。所谓“无感知调度”，核心是让主应用自动识别当前 URL 应该加载哪个子应用、并透传正确 base path 和路由状态，而无需子应用主动适配或用户感知切换过程。
用计算属性辅助路由映射关系推导
在主应用中，可将路由路径与子应用配置建立映射，并用计算属性实时推导目标子应用及其参数：
- 定义子应用注册表（如：apps = [{ id: 'user', prefix: '/user', url: '//cdn/user-app.js' }, ...]）
- 监听 router.currentRoute.value.fullPath 变化
- 通过计算属性 activeApp 匹配首个匹配 fullPath.startsWith(app.prefix) 的子应用
- 该计算属性返回对象包含 id、base、props、url 等，供
组件直接绑定
结合路由守卫完成无感挂载与卸载
仅靠计算属性无法触发子应用生命周期，需配合全局前置守卫实现自动调度：
- 在 router.beforeEach 中调用 activeApp.value 获取目标子应用
- 若目标变更，先调用 microApp.unmount(appId) 清理旧实例
- 再调用 microApp.mount({ name: appId, url: app.url, props: { base: app.base } })
- 确保子应用接收的 props.base 与当前 URL 前缀严格一致（如 /user），避免内部路由解析错位
子应用内不硬编码 base，依赖传入值初始化
子应用自身不能假设自己的部署路径，必须从主应用接收 base 并用于路由构造：
立即学习“前端免费学习笔记（深入）”；
- Vue Router v4+：创建 router 实例时传入 createRouter({ history: createWebHistory(window.__MICRO_APP_BASE_ROUTE__ || '/'), routes })
- React Router v6+：使用
- 禁止使用 process.env.BASE_URL 或静态字符串 base: '/user'，否则刷新后路由失效
服务端兜底与浏览器行为对齐
无感知不仅体现在 JS 层，还要求 URL 刷新、前进/后退完全可用：
- Nginx 配置需对每个子应用前缀做 fallback，例如 location /user { try_files $uri $uri/ /index.html; }
- 主应用构建时保持 publicPath 为 '/'，子应用资源由主应用统一托管或 CDN 加载，不依赖子应用自身路径
- 子应用内部跳转必须使用框架提供的导航方法（如 router.push('/profile')），而非 window.location.href，否则破坏主应用路由同步
