子应用路由必须与主应用base path对齐，否则导致跳转失效、刷新404或重定向；需通过window.__MICRO_APP_BASE_ROUTE__传入并配置路由base，服务端需fallback兜底，且须主动通知主应用路由变更。
微前端子应用的路由不能自己“认路”，必须和主应用对齐 base path，否则 history.pushState 写错、useNavigate 跳转失效、刷新 404 或无限重定向——这是绝大多数踩坑的根源。
子应用如何识别当前 URL 的 base path
子应用启动时若把 /app1/user/123 当作 /user/123 解析，就会漏掉前缀，导致内部路由匹配失败。关键不是“能不能跳”，而是“跳完 URL 是什么”以及“主应用是否感知到变化”。
- 主应用需在挂载子应用前，通过 props 或全局变量（如
window.__MICRO_APP_BASE_ROUTE__）显式传入 base path，例如"/app1" - 子应用路由初始化时必须用该 base path 构造完整路径：Vue Router 配置
base: window.__MICRO_APP_BASE_ROUTE__ || '/'；React Router v6+ 使用<router basename="{base}"></router> - 避免硬编码
basename或依赖process.env.PUBLIC_URL，它们在运行时不可控，尤其在主应用动态加载场景下会失效
history 模式下子应用刷新 404 怎么破
这不是子应用的问题，是服务端没兜底。当用户直接访问 https://host/app1/order/5，请求到达 Nginx 或 Express 时，它根本不知道这是前端路由，只会按静态文件找 /app1/order/5 路径，自然 404。
- 主应用部署的服务端必须配置 fallback：所有不匹配静态资源的
/app1/*请求，都返回主应用的index.html - Nginx 示例：
location /app1 { try_files $uri $uri/ /app1/index.html; } - Express 示例：
app.get('/app1/*', (req, res) => res.sendFile(path.join(__dirname, 'index.html'))); - 注意：子应用自己的构建输出无需改 publicPath，只要确保其静态资源（js/css）能被主应用正确加载即可；base path 只影响路由解析，不影响资源加载路径
子应用路由变更如何通知主应用
主应用需要知道子应用当前在哪，才能做权限校验、菜单高亮、埋点上报等。但子应用用 history.pushState 或 useNavigate 时，主应用默认收不到通知。
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
立即学习“前端免费学习笔记（深入）”；
- 推荐方案：子应用在路由变化后主动 dispatch 自定义事件，如
new CustomEvent('micro-app-route-change', { detail: { pathname: location.pathname } })，主应用监听该事件 - 不推荐劫持
history.pushState：容易与框架内部逻辑冲突（比如 React Router v6 的 navigate 已封装了 pushState），且难以覆盖 replaceState、浏览器前进后退等场景 - Vue Router 可在
router.afterEach钩子中发事件；React Router v6+ 可用useLocation+useEffect监听并上报
Hash 模式能绕过 base path 问题吗
不能。Hash 模式只是把路由信息塞进 # 后面，但子应用仍需知道自己“属于哪个上下文”。比如主应用在 /app2 下加载子应用，用户访问 https://host/#/user，子应用仍需理解这个 /user 是在 /app2 域内，否则菜单高亮、权限判断全乱。
- Hash 模式下 base path 依然要传，只是不参与 URL 路径匹配，而用于上下文标识和状态管理
- 例如：子应用内部生成跳转链接时，
to="/settings"应转为to="#/app2/settings"（或统一加前缀再截取），否则主应用无法区分不同子应用的同名 hash - Hash 模式省去了服务端 fallback 配置，但牺牲了 SEO 和 URL 美观性，且在微前端中并未规避路由协同问题
最常被忽略的一点：子应用路由的「激活状态」不能只靠 URL 匹配，必须结合主应用下发的生命周期信号（如 mounted、unmounted）来启停路由监听，否则卸载后仍在响应 popstate，会造成内存泄漏和意外交互。
