微前端子应用路由跳转后主应用菜单高亮不更新怎么办？

Good“文茹提问于 2026-02-24 15:27:17 阅读 18

框架

我在用 qiankun 搭建微前端项目，主应用是 Vue3，子应用也是 Vue。现在的问题是：当在子应用里通过 router.push('/user/list') 跳转路由后，浏览器地址栏变了，但主应用的侧边菜单高亮还是停留在原来的菜单项上，没跟着更新。

我试过在子应用跳转后手动触发主应用的事件，但感觉耦合太强。有没有更优雅的方式让主应用能感知到子应用的路由变化并同步更新菜单状态？

路由管理

我来解答赞 4 收藏

反馈

1 条解答

永莲酱~ Lv1

检查一下主应用有没有监听子应用的路由变化，qiankun 提供了 onGlobalStateChange 和 setGlobalState，但更推荐用 MicroApp 的 onLifeCycle 或子应用主动发事件，不过最优雅的是让主应用监听 location.hashchange 或 popstate 事件，因为子应用路由跳转本质是改 hash 或 history，主应用只要监听这个就能知道路由变了，然后根据当前 URL 重算高亮菜单就行，比如在主应用挂载时加个监听：

window.addEventListener('hashchange', () => {

  const currentPath = window.location.hash.replace('#', '') || '/'

  updateActiveMenu(currentPath)

})

如果用了 history 模式就监听 popstate，或者直接在主应用里监听 qiankun 的 microApp.start 后的 microApp.on('update', ...) 事件，但 hash 监听最简单粗暴好用，亲测有效。

2026-02-24 16:08