qiankun主子路由联动需满足三条件：主应用路由覆盖子应用路径前缀、路由模式一致、子应用跳转用原生history；无界通过query自动同步子应用路径；跨子应用跳转须主应用接管；权限路由与菜单应基于统一权限树动态生成。
主子应用路由联动不是简单地让URL变一变，关键在于路由状态的感知、同步和响应机制是否闭环。不同微前端方案处理方式差异明显，选对路子才能少踩坑。
qiankun 中主子路由联动的核心逻辑
qiankun 本身不接管子应用路由，而是靠 activeRule 触发子应用加载，并通过沙箱代理 window.history 实现跳转拦截。联动效果依赖三件事：
- 主应用路由配置必须覆盖子应用路径前缀，例如子应用 activeRule 是
/user-center，主应用 router 中就要有path: '/user-center/*'的兜底路由 - 子应用需使用与主应用一致的路由模式（history 或 hash）；若主应用是 history，子应用不能用 hash，否则 popstate 不触发
- 子应用内部跳转不能直接调用
this.$router.push或router.push，而应走原生history.pushState，避免被沙箱吞掉或触发错误重定向
无界（Wujie）的自动同步机制更省心
无界采用 iframe + WebComponent 方案，天然隔离路由系统。它通过劫持子应用 iframe 内的 history 操作，把子应用当前路径自动映射到主应用 URL 的 query 参数中，比如：
主应用 URL 变为：https://host.com/micro?subPath=/user/list&subApp=vue2-app
- 子应用完全不用改路由代码，history 模式照常写，无感接入
- 刷新页面时，主应用能从 query 中还原子应用路径，自动加载对应页面
- 主应用菜单点击跳转，只需更新 URL query，无界会主动通知 iframe 切换路由
手动同步场景：跨子应用跳转怎么做
当用户从 Vue 子应用点击跳转到 React 子应用时，不能只改子应用内部路由。必须让主应用感知并接管：
- 在子应用中调用
window.history.pushState({}, '', '/react-app/dashboard')，路径必须匹配目标子应用的 activeRule - 主应用监听
popstate或使用 qiankun 的addGlobalUncaughtErrorHandler捕获路由变更，再触发对应子应用激活 - 更稳妥的方式是主应用暴露一个全局跳转方法（如
window.jumpToSubApp('react-app', '/dashboard')），由子应用调用，主应用统一调度
权限路由与菜单联动要前置设计
菜单和路由不是两个独立模块，而是一体两面。推荐做法是：
- 后端返回统一权限树，含
path、name、code、type（menu/button）等字段 - 主应用根据权限树动态生成菜单，并将有效
path注册进主路由（作为懒加载占位） - 子应用启动时，主应用通过 props 传入其可访问的子路由白名单，子应用自行过滤注册自己的 router.addRoute
- 按钮级权限用
v-permission="system:user:edit"指令校验，code 集合来自权限树扁平化后的 Set
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
