Vue Router 怎么在微前端架构中配置独立子应用路由-Vue.js-PHP中文网

vue router在微前端中需实现“受控协同”：主应用路由须配置通配路径覆盖子应用前缀，子应用路由模式与base须与主应用严格对齐，内部跳转应使用原生history api；无界方案可自动处理路由同步。

vue router 怎么在微前端架构中配置独立子应用路由

Vue Router 在微前端中配置子应用路由，关键不是让它“独立运行”，而是让它“受控协同”——既要保持自身路由逻辑完整，又要与主应用路径、生命周期和跳转行为对齐。不同微前端方案（如 qiankun、无界）处理方式不同，但核心思路一致。

主应用的 Vue Router 必须声明能匹配子应用入口路径的兜底路由，否则 URL 变化时主应用无法识别，子应用也不会加载。

例如子应用的 activeRule 是 /user-center，主应用路由应配置：
{ path: '/user-center/*', component: () => import('@/views/Main') }
使用 * 通配符确保所有子应用内部路径（如 /user-center/profile）都能命中该路由
该路由组件（如 Main.vue）只需提供一个容器（如 <div id="sub-app-container"></div>），不负责渲染具体页面

子应用不能随意用 hash 或 history 模式，必须与主应用严格一致；同时要通过 base 明确自身路由作用域，避免路径冲突或资源加载失败。

Ainative Vue Sdk

使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……

下载

若主应用为 history 模式，子应用也必须用 history，且 base 设为与 activeRule 完全一致的路径，例如：
createWebHistory('/user-center')
若主应用是 hash 模式，子应用需设 mode: 'hash' 并确保 base 匹配（Vue Router 3 中为 base: '/user-center'）
注意：Vue 3 的 createWebHistory 第二个参数才是 base，不要误写成 import.meta.env.BASE_URL 而忽略实际路由前缀

qiankun 等沙箱方案会劫持 window.history，但会拦截子应用直接调用 this.$router.push 或 router.push，导致跳转失效或触发重定向错误。

正确做法：在子应用中统一使用 history.pushState、history.replaceState 或 router.push 的 replace: true 配合手动更新 URL
推荐封装一个跳转函数，自动拼接 base 前缀：
function goTo(path) { history.pushState({}, '', '/user-center' + path); }
监听路由变化应使用 history.listen（qiankun 提供）或 window.addEventListener('popstate', ...)，而非依赖 Vue Router 的导航守卫