子应用跳转失败因未识别主应用base路径，导致useNavigate写入错误URL；须由主应用传入base（如"/app1"），子应用Vue Router设base: window.__micro_app_base_route__ || '/'，禁用process.env.BASE_URL。
子应用 HTML 里写 /user/123 为什么跳不到正确页面
因为子应用根本没“看到”自己该在 /app1/user/123 下运行，它把路径当成了根路径处理。浏览器 history API 写入的是完整 URL，但子应用路由初始化时没用主应用给的 base path，导致 useNavigate('/user/123') 实际 push 到了 https://host/user/123，而不是 https://host/app1/user/123。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 子应用启动前，主应用必须通过
window.__micro_app_base_route__或 props 显式传入 base，例如"/app1" - Vue Router 初始化时写
base: window.__micro_app_base_route__ || '/'，别用process.env.BASE_URL—— 构建时固化，运行时不可变 - React Router v6+ 必须用
<Router basename={base}>包裹，不能靠useNavigate自己拼接 - 检查子应用实际加载后的 URL：打开 DevTools → Application → Frames，确认当前 frame 的 URL 是
/app1/xxx而不是/xxx
history.pushState 在子应用里调用后主应用没响应
这不是主应用“没监听”，而是子应用改了 URL，但没通知主应用——微前端里路由变更不是自动广播的。主应用只认自己管理的 history 实例，子应用直接调 pushState 相当于在沙箱里偷偷改表，主应用根本不知道发生了什么。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 子应用禁止直接调用
history.pushState或replaceState，所有跳转必须走主应用暴露的路由 API（如window.microApp.router.push） - 若用 qiankun，子应用需在挂载后主动调用
setGlobalState或触发自定义事件通知主应用；qiankun 本身不劫持原生 history - 主应用要监听子应用的路由变更，得靠约定通信机制，比如监听
micro-app-route-change自定义事件，而非依赖 popstate - 验证方式：在子应用中执行
history.pushState(null, '', '/order/5')后，看主应用的window.location.pathname是否同步变化 —— 不变就说明没桥接
刷新 /app1/order/5 返回 404，但点链接能进
这是服务端问题，和 HTML 结构、JS 沙箱、样式隔离全无关系。浏览器直接请求 /app1/order/5，Nginx/Express 按静态文件规则找这个路径，找不到就 404。单页应用的路由是前端逻辑，服务端根本不知道 /app1/order/5 应该返回 /app1/index.html。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- Nginx 配置必须加
location /app1 { try_files $uri $uri/ /app1/index.html; }，注意路径前缀和 index 文件位置一致 - Express 中不能只写
app.get('*', ...)，得限定为app.get('/app1/*', ...)，否则会干扰主应用或其他子应用路由 - 子应用构建产物无需改
publicPath，只要确保其index.html能被主应用通过 entry 地址正确加载即可 - 验证方法：curl -I https://host/app1/order/5，看返回是否为 200 + text/html，而不是 404
HTML 中写 <div id="login-form"> 为何被主应用样式污染
HTML 元素 ID 和 class 天然全局，id="login-form" 不等于“只归我管”。主应用写了 #login-form input { border: 2px solid red }，照样生效——data-* 属性、自定义标签、甚至 Shadow DOM 都不是默认开启的，得手动配、手动挂、手动注入。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 别指望 HTML 结构自带隔离，
id和class就是全局作用域的入口，冲突是常态，不是异常 - 如果用 Shadow DOM，必须在构造时明确写
attachShadow({ mode: 'closed' })，mode: 'open'等于没隔离 - qiankun 的
strictStyleIsolation: true只重写<style>标签内容，对内联、第三方库动态插入的样式（如 Ant Design 的<style>）无效 - 真正落地的组合是：构建时 PostCSS 加前缀 + 运行时框架注入 scoped 规则 + 关键节点用
data-app="auth"手动限定选择器范围
子应用 HTML 的结构本身不参与路由分发，也不决定样式边界；它只是被加载、被挂载、被包裹的静态文本。真正起作用的，是 base path 怎么传、history 怎么桥接、服务端怎么 fallback、样式怎么重写——这些环节任何一处松动，都会让看似正确的 HTML 瞬间失效。
