解决qiankun下浏览器回退bug

最近项目尝试了vite+vue3+qiankun的架构，遇到了一个bug： 点击浏览器的回退和前进，子应用会出现路由无法匹配的情况。

问题分析

排查问题，首先在路由导航router.beforeEach中，将每一次的路由地址打印出来，发现回退时，如果匹配的是子应用，子应用中会丢失activeRule。

// src/qiankun/index.js
import { registerMicroApps } from 'qiankun'

// 注册微应用
export const appList = [
  // 子应用
  {
    name: 'micApp', // 应用标识
    entry: 'http://1.71.160.244:891', // 应用线上地址
    container: '#subApp', // 子应用绑定DOM节点ID
    activeRule: '/mic-app', // 子应用响应路由
    webTitle: 'xxx应用' // 子应用名称
  }
]
registerMicroApps(appList)

解决思路

首先去qiankun官网的常见问题和GitHub的issue上去看了一下，有提出类似的问题，但是没有解决方案。

尝试自己去解决。

首先回退的地址是存储在html5中的history里的。

回退时，打印hsitory对象, current值是正常的，back值是完整路由丢失了activeRule那一部分。那么只要在正常路由跳转时，把正确路由替换到back里面，回退就ok了。刚好historyAPI有一个方法，直接上答案。

router.beforeEach(async (to, from, next) => {
  history.replaceState({ back: from.path }, to.name, '')
})

待解决

目前不明白，为什么进入子应用的时候，history为什么会不记录完整的路由地址，而是要吞掉activeRule那一部分。