` 会请求主应用的 8080 端口而非子应用的 3001 端口 | ⭐⭐⭐ 高 |
+| 独立运行失败 | 不经过主应用直接访问子应用时，base 为空字符串，路由跳转可能出错 | ⭐⭐ 中 |
+| `history.go()` 异常 | 直接操作浏览器历史时不经过 micro-app 拦截，可能跳出微前端上下文 | ⭐ 低 |
+
+**最佳实践：**
+
+```ts
+// 子应用 router/index.ts
+import { createRouter, createWebHistory } from 'vue-router'
+
+const router = createRouter({
+ history: createWebHistory(
+ // 动态适配：微前端环境用 baseroute，独立运行用 '/'
+ window.__MICRO_APP_BASE_ROUTE__ || '/'
+ ),
+ routes: [
+ { path: '/about', component: () => import('@/views/About.vue') }
+ ]
+})
+```
+
+`window.__MICRO_APP_BASE_ROUTE__` 是 micro-app 注入到子应用 window 上的全局变量，值就是主应用中配置的 `baseroute`。
+
+---
+
+### Q6：micro-app 是如何实现"主应用路由和子应用路由互不干扰"的？
+
+**答：**
+通过 **URL 命名空间隔离** 机制：
+
+```
+主应用路由空间（Vue Router 管理）
+├── / → 重定向到 /home
+├── /home → Home.vue
+├── /about → About.vue (如果定义了)
+├── /child-app/:page* → 子应用 vue2-app 的领地
+└── /vue3-app/:page* → 子应用 vue3-app 的领地
+
+子应用 vue2-app 路由空间（内部 Router 管理，剥离 /child-app 前缀后）
+├── / → 首页
+├── /about → 关于页
+└── /user/:id → 用户详情
+
+子应用 vue3-app 路由空间（内部 Router 管理，剥离 /vue3-app 前缀后）
+├── / → 首页
+├── /about → 关于页
+└── /dashboard → 控制台
+```
+
+**三层隔离保证：**
+
+1. **Vue Router 层级** — 主应用的 `/about` 和通配路由 `/vue3-app/:page*` 互斥匹配，不会同时命中
+2. **baseroute 剥离** — micro-app 在将 URL 传给子应用前，自动去除 baseroute 前缀
+3. **iframe 沙箱** — Vite 子应用运行在独立 iframe 中，`window.location` 指向自己的 origin
+
+---
+
+## 三、SubAppConfig 接口设计
+
+### Q7：`SubAppConfig` 接口各字段的作用和设计考量是什么？
+
+**答：**
+
+```ts
+export interface SubAppConfig {
+ name: string // 全局唯一标识，字母开头
+ url: string // 子应用 devServer / 生产地址
+ baseroute: string // 主应用分配给子应用的 URL 命名空间
+ iframe?: boolean // 是否使用 iframe 沙箱
+ keepAlive?: boolean // 切换时是否保活
+ routerMode?: 'native' | 'native-scope'
+ disableScopecss?: boolean // 禁用样式隔离
+ disableSandbox?: boolean // 禁用 JS 沙箱
+}
+```
+
+| 字段 | 为什么可选/必填 | 设计考量 |
+|------|----------------|----------|
+| `name` | 必填 | micro-app 框架需要唯一标识来管理子应用生命周期 |
+| `url` | 必填 | 不知道地址就无法加载；生产环境应通过环境变量注入 |
+| `baseroute` | 必填 | 决定 URL 命名空间，也影响子应用的资源路径解析 |
+| `iframe` | 可选，默认 false | Vite 子应用必须设为 true（ES Module 兼容性） |
+| `keepAlive` | 可选 | 高频切换场景开启可提升体验，但占用内存 |
+| `routerMode` | 可选 | `native-scope` 提供额外的作用域隔离 |
+| `disableScopecss` | 可选 | 调试时临时关闭样式隔离，排查样式问题 |
+| `disableSandbox` | 可选 | 调试时临时关闭沙箱，确认是否是沙箱引起的 bug |
+
+---
+
+### Q8：为什么 Vite 子应用的 `iframe` 必须设为 `true`？
+
+**答：**
+见 [基础面试题 Q7](./micro-app面试题.md#q7遇到-cannot-use-import-statement-outside-a-module-报错是什么原因如何解决)，核心原因：
+
+```
+Vite devServer 输出 ES Module (type="module")
+ ↓
+with 沙箱用 new Function() 执行 JS
+ ↓
+new Function() 无法解析 import/export 语法
+ ↓
+❌ SyntaxError: Cannot use import statement outside a module
+```
+
+**解决：** `iframe: true` → 浏览器原生 iframe 天然支持 `
+
+```
+
+```js
+// Webpack 打包后的 JS 格式（UMD / IIFE）：
+(function(module, exports, __webpack_require__) {
+ // 所有模块代码都在一个函数闭包里
+ // 没有 import/export 语句！
+ var Vue = __webpack_require__('vue')
+ // ...
+})
+```
+
+**关键特征：** Webpack 打包产物是**普通脚本（Regular Script）**，不包含 `import`/`export` 语句。
+
+**with 沙箱的工作方式：**
+
+```
+micro-app with 沙箱执行流程：
+
+1. 获取子应用的 JS 代码（字符串）
+2. 用 with(window.proxy) 创建一个作用域链
+3. 通过 new Function(code) 执行 JS
+
+ 伪代码：
+ const sandboxCode = `
+ with (this.proxyWindow) {
+ ${子应用的JS代码} ← 普通 JS，可以执行 ✅
+ }
+ `
+ const fn = new Function('window', 'document', sandboxCode)
+ fn(proxyWindow, proxyDocument)
+```
+
+因为 Webpack 产出的 JS 是普通的 IIFE/UMD 代码，`new Function()` 完全可以执行它。Proxy 劫持了 `window.document` 等全局变量的访问，实现了沙箱隔离。
+
+---
+
+#### Vite 子应用：with 沙箱不可执行（必须用 iframe）
+
+**Vite devServer 的代码输出：**
+
+```html
+
+
+```
+
+```js
+// Vite 不对源码打包，直接输出 ES Module：
+import { createApp } from '/node_modules/.vite/deps/vue.js?v=abc123'
+import App from '/src/App.vue'
+import router from '/src/router/index.ts'
+// ↑ 全是 import/export 语句！
+```
+
+**关键特征：** Vite devServer 输出的是 **ES Module（`
+
+
+主应用的about
+
+
+
\ No newline at end of file