在路由前置守卫中监听 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的子应用来回切换,会重复创建子应用实例