qiankun 微前端：子应用和主应用通过浏览器回退按钮切换时无法切回子应用

子应用和主应用通过浏览器回退按钮切换时无法切回子应用

问题描述：

子应用中通过给 createWebHistory 传参的方式设置基本路径，在主应用中通过路由跳转到子应用，再通过路由跳转到主应用任意页面，然后再通过回退按钮回到子应用，此时发现无法回到子应用，url 上没有携带子应用基本路径

如下图所示：

主应用的路由配置如下：

子应用的路由配置如下：

问题出现原因

子应用中通过 createWebHistory 传参的方式设置基本路径，在页面跳转时浏览器不会记录该基本路径

如下图所示：

解决方案：

子应用中 不要通过给 creatwebHistory() 传参的方式设置基本路由，通过字符串拼接的方式来设置基本路径

// 子应用中的路由配置文件
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'

const basePath = '/vue-app'
const routes: Array<RouteRecordRaw> = [{
    path: '/',
    redirect: basePath + '/index',
}, {
    path: basePath + '/index',
    name: 'index',
    component: () => import('@/page/index.vue'),
}]

const router = createRouter({
    history: createWebHistory(),
    routes,
})
export default router