乾坤通过loadMicroApp跳转子应用特定页面

1 阅读2分钟

本文记录子应用包含路由时候的常见问题

前提

前提一,乾坤加载子应用有两种方式,第一种是静态注册registerMicroApps,第二种是动态加载 loadMicroApp

前提二, 变url地址,而是在内存中记录),不管子应用还是底座应用,他们共享的都是同一份url地址, 也就是谁的路由变化都会改变这个一份url, 前提三 vue-router用的history或者hash两种路由方式 ,还有一种不常见的abstract方式(表示路由跳转不会显示改

静态注册路由

那么如果子应用要跳转自己的路由地址,就需要设置路由的baseurl,

先来说一下 如果不设置,也就是随意些跳转 会出现什么情况

加入底座应用定义了一个子应用

image.png

那么访问地址栏里/reactapp会跳转到子应用

子应用里又定义了自己的路由

image.png 此时再子应用点击about, 那么地址栏会变成/about

此时子应用会空白,因为底座应用是通过url里包含/reactapp 才会跳转到子应用

所以解决办法也很简单,就是让子应用的路由baseurl等于底座应用的找到activeRule, 这样子应用如何跳转自己的路由,底座应用也能找到

image.png

动态加载的路由,也就是通过loadMicroApp方式去动态加载一个子应用,如果有自己的路由该怎么办

github.com/umijs/qiank…

image.png

首先明确个前提

image.png

image.png

意思是跳转子应用的时候,只支持跳转到子应用的首页 也就是main.js, 而且动态加载的路由不支持在url里增加path, 所以只有通过虚拟路由的形式实现,

1 首先将子应用注册为虚拟路由abstract模式,这样子应用改变路由的时候不会改变url, image.png 2 底座应用跳转子应用的时候通过props形式传递子应用要加载的自己的路由参数,

image.png 3 自应用在main.js入口文件获取到底座应用带过来的参数,自己跳转到自己对应的子路由, 如图中获取到在main.js中获取到haha,然后跳转路由 ,即可