微前端架构下多应用路由跳转如何同步状态？

你这问题出在路由跳转方式不对，子应用直接用 this.$router.push 跳到主应用的路由，相当于在沙箱里瞎跳，主应用根本不知道发生了啥，当然不更新。

正确做法是：跨应用跳转必须由主应用来驱动。你在子应用里不要自己 push，而是发个消息给主应用让它跳，这样路由才归主应用的 router 管。

最简单高效的方式是通过 window.__POWERED_BY_QIANKUN__ 判断环境，然后调用主应用暴露的跳转方法：

methods: {

  gotoUser() {

    // 在子应用中通知主应用跳转

    if (window.__POWERED_BY_QIANKUN__) {

      // 假设主应用挂载了全局跳转函数

      window.microAppRouterPush('/user/123')

    } else {

      // 非微前端环境降级处理

      this.$router.push('/user/123')

    }

  }

}

然后在主应用里暴露这个函数：

// 主应用入口

window.microAppRouterPush = (path) => {

  router.push(path)

}

至于状态丢失的问题，别把关键状态放子应用的 Vuex 里。跨应用共享的状态应该提到主应用维护，或者用 window.dispatchEvent(new CustomEvent('state-change', { detail: data })) 广播，子应用监听同步。

也可以考虑用 localStorage + storage 事件做轻量同步，虽然多了点 IO 但胜在稳定，比 message 复杂通信效率更高也更可靠。

核心就一点：路由控制权不能下放，状态共享要提升。不然就是边开车边换引擎。

你这个问题很典型，qiankun微前端下路由跳转失灵和状态丢失的根本原因在于：子应用直接调用 this.$router.push 实际上是在改自己的路由系统，而主应用的路由根本不知道发生了变化。更严重的是，在 qiankun 环境里，子应用的 Vue Router 和主应用是完全隔离的，所以你在子应用里 push 到主应用的路径，相当于在沙箱里瞎折腾，主应用无感。

至于你后面尝试用 postMessage 虽然能触发跳转，但状态丢了，那是因为子应用被 unload 了，Vuex 的内存状态自然就没了。这不是 bug，这是微前端的正常生命周期行为。

要解决这个问题，得从两个层面入手：路由同步 + 状态持久化。

先说正确的做法：

你应该让子应用不要直接操作主应用的路由，而是通过通信机制通知主应用去跳转。qiankun 提供了现成的通信方式 —— initGlobalState 或者通过 props 传递事件函数。我推荐用 props 传方法，更直观可控。

主应用在注册子应用时，可以往子应用的 props 里注入一个跳转函数：

// 主应用 main.js

registerMicroApps([

  {

    name: 'subapp',

    entry: '//localhost:8081',

    container: '#subapp-container',

    activeRule: '/subapp',

    props: {

      // 注入一个主应用的跳转能力

      routerPush: (path) => {

        router.push(path) // 这里的 router 是主应用的 Vue Router

      },

      // 同时也可以注入状态同步方法

      setGlobalState: (key, value) => {

        localStorage.setItem(global_${key}, JSON.stringify(value))

      }

    }

  }

])



// 启动 qiankun

start()

然后在子应用里拿到这个 props，就可以安全地通知主应用跳转了：

// 子应用入口文件 main.js

let routerPush = null



// 在 createApp 时接收主应用传来的 props

export async function mount(props) {

  routerPush = props.routerPush



  // 同时可以把跳转方法挂到全局或 Vue 原型上

  Vue.prototype.$mainRouterPush = routerPush

  app.mount('#app')

}



// 卸载时清理

export async function unmount() {

  app.unmount()

}

这样你在子应用任何地方都可以通过 this.$mainRouterPush('/user/123') 安全跳转，主应用的路由会正常响应，页面也会更新。

接下来是状态丢失的问题。你说的筛选条件不能丢，那就要做状态持久化。最简单的方式是把关键状态存到 localStorage，但要注意不是所有状态都适合持久化，比如敏感数据或大量数据。

你可以封装一个工具：

// utils/persistentState.js

const STATE_KEY = 'subapp_filter_state'



export const saveFilterState = (state) => {

  localStorage.setItem(STATE_KEY, JSON.stringify(state))

}



export const getFilterState = () => {

  const saved = localStorage.getItem(STATE_KEY)

  return saved ? JSON.parse(saved) : null

}



export const clearFilterState = () => {

  localStorage.removeItem(STATE_KEY)

}

然后在子应用的 Vuex store 中处理：

// store/index.js

import { getFilterState, saveFilterState } from '@/utils/persistentState'



const store = new Vuex.Store({

  state: {

    filters: getFilterState() || { keyword: '', category: '' }

  },

  mutations: {

    SET_FILTERS(state, filters) {

      state.filters = filters

      saveFilterState(filters) // 每次变更都保存

    }

  }

})

这样即使子应用被 unload 再 mount，也能从 localStorage 恢复上次的状态。

还有一个细节你可能没意识到：qiankun 的子应用在切换时会触发 unload 和 mount，所以你之前在 beforeEnter 里监听 message，addEventListener 没有配对 removeListener，会导致内存泄漏和重复绑定。你应该在组件销毁时清理：

beforeDestroy() {

  window.removeEventListener('message', this.handleStatus)

}

不过现在既然不用 postMessage 做跳转了，这层监听其实可以干掉。

总结一下解决方案：

1. 子应用不要自己 push 主应用的路由，必须通过主应用提供的方法来跳转
2. 主应用通过 props 注入 routerPush 函数，确保跳转发生在主应用上下文
3. 关键状态用 localStorage 持久化，避免 unload 导致数据丢失
4. 所有事件监听都要配对添加和移除，防止内存泄漏

这样做之后，你的跳转就不会再报 microApp undefined 了，因为根本不会进入那个错误的执行路径，状态也能保留住。

微前端的坑大多出在“以为自己能直接操作主应用”上，实际上所有跨应用的操作都得走通信协议，别图省事绕过设计规范。qiankun 的沙箱机制就是用来隔离的，你越想强行穿透，问题越多。