qiankun 与vue-router4 不兼容导致路由显示 undefined 问题

在路由前置守卫中监听 to 及 from 的变化，发现 router.push 跳转路由时，会发现打印出 两次以上的 to、form 对象，只有第一次打印的from对象是正确的，而后两次都是由于 qiankun 与vue-router 不兼容引起的路由守卫重复执行的问题导致的，当重复执行三次以上时，用户点击浏览器左上角的回退按钮会出现路由显示undefined，导致页面404不展示

 

 解决方法：使用 window.history.pushState() 代替 router.push() 方法

//打包后 import.meta.env.PROD 在生产环境为true
     if (import.meta.env.PROD) {
        window.history.pushState(
          null,
          null,
          `/production/taskDetail?taskId=${val.taskId}&taskName=${val.taskName}`
        )
      } else {
        router.push({
          path: "/taskDetail",
          query: {
            taskId: val.taskId,
            taskName: val.taskName
          }
        })
      }

使用history.pushState的方式，不会触发浏览器的刷新行为。history 模式时，当浏览器的pathname发生变化时，qiankun主应用会监听到路由发生变化，并加载对应的页面。

参考：主应用和子应用都是用Vue3+VueRouter4，点击主应用中菜单进行router.push，对应同一个activeRule的子应用来回切换，会重复创建子应用实例