本文记录子应用包含路由时候的常见问题
前提
前提一,乾坤加载子应用有两种方式,第一种是静态注册registerMicroApps,第二种是动态加载 loadMicroApp
前提二, 变url地址,而是在内存中记录),不管子应用还是底座应用,他们共享的都是同一份url地址, 也就是谁的路由变化都会改变这个一份url, 前提三 vue-router用的history或者hash两种路由方式 ,还有一种不常见的abstract方式(表示路由跳转不会显示改
静态注册路由
那么如果子应用要跳转自己的路由地址,就需要设置路由的baseurl,
先来说一下 如果不设置,也就是随意些跳转 会出现什么情况
加入底座应用定义了一个子应用
那么访问地址栏里/reactapp会跳转到子应用
子应用里又定义了自己的路由
此时再子应用点击about, 那么地址栏会变成/about
此时子应用会空白,因为底座应用是通过url里包含/reactapp 才会跳转到子应用
所以解决办法也很简单,就是让子应用的路由baseurl等于底座应用的找到activeRule, 这样子应用如何跳转自己的路由,底座应用也能找到
动态加载的路由,也就是通过loadMicroApp方式去动态加载一个子应用,如果有自己的路由该怎么办
首先明确个前提
意思是跳转子应用的时候,只支持跳转到子应用的首页 也就是main.js, 而且动态加载的路由不支持在url里增加path, 所以只有通过虚拟路由的形式实现,
1 首先将子应用注册为虚拟路由abstract模式,这样子应用改变路由的时候不会改变url,
2 底座应用跳转子应用的时候通过props形式传递子应用要加载的自己的路由参数,
3 自应用在main.js入口文件获取到底座应用带过来的参数,自己跳转到自己对应的子路由,
如图中获取到在main.js中获取到haha,然后跳转路由 ,即可