总结一下 qiankun 微前端项目下，主应用和微应用的路由模式如何进行配置，用一个简单的 以 vue2为框架的demo 进行分享，主应用和微应用都采用 vue2 框架进行搭建

主应用和微应用的配置就不再进行讲解，可以看下 qiankunjs微前端框架详解

主应用和微应用都选择 history 模式

主应用：

注册路由的时候需要进行路由通配（即 /child/*），因为我所选择的是在某个路由页面加载的微应用，所以要进行路由通配，可以查看官网 如何在主应用的某个路由页面加载微应用，如果不进行路由通配，会报错容器未找到

可以在官网的常见问题中查看此错误 Application died in status NOT_MOUNTED: Target container with #container not existed while xxx loading!

微应用：

微应用中路由的 base 要与主应用中注册微应用时的 activeRule 配置一致，activeRule 就是设置的微应用的路由匹配规则

主应用和微应用都使用 hash 模式

主应用配置

微应用配置

微应用路由 base 相对于 history 模式下不需要做修改，只需要在 routes 中的每个路由都加上 base 值作为前缀即可，即/ --> /child/vue-child /child-page --> /child/vue-child/child-page等

主应用使用 history 模式，微应用使用 hash 模式

此种模式下的配置与主应用和微应用都采用history 模式下配置一致

主应用使用 hash 模式，微应用使用 history 模式

此种路由模式下会出现很多问题，试了很多种方法，例如跳转不成功、路由爆栈、切换其他主应用下的界面时，微应用未卸载，导致携带上了微应用的路由，或者直接把微应用的页面和主应用下的子页面共同展示出来、跳转成功但是路由臃肿等问题。

看了下 qiankun 的 github issues 有同学分享出此种模式下需要进行兼容，即微应用也需要切换 hash 路由模式，否则会出现微应用切换自身路由时，改变主应用 hash 路由的情况, 例如：微应用切换自身路由 /about, 此时 url 会变成 http://localhost:8080/about/#/micro/live。而我们期望的路由是 http://localhost:8080/#/micro/live/about

详细可以看下这里 –> qiankun issues 24

目前还在测试，等测试出来了会贴图分享，如果有测试出来的小伙伴可以在评论区分享下demo

原文链接：https://juejin.cn/post/7353442647765827595 作者：蜡笔熊