必须保证微应用加载时主应用这个路由页面也加载了。
vue + vue-router 技术栈的主应用:
主应用注册这个路由时给 path 加一个 *,注意:如果这个路由有其他子路由,需要另外注册一个路由,仍然使用这个组件即可。
const routes = [
{
path: '/portal/*',
name: 'portal',
component: () => import('../views/Portal.vue'),
},
];
微应用的 activeRule 需要包含主应用的这个路由 path。
registerMicroApps([
{
name: 'app1',
entry: 'http://localhost:8080',
container: '#container',
activeRule: '/portal/app1',
},
]);
在 Portal.vue 这个组件的 mounted 周期调用 start 函数,注意不要重复调用。
import { start } from 'qiankun';
export default {
mounted() {
if (!window.qiankunStarted) {
window.qiankunStarted = true;
start();
}
},
};
react + react-router 技术栈的主应用:只需要让微应用的 activeRule 包含主应用的这个路由即可。
angular + angular-router 技术栈的主应用,与 vue 项目类似:
主应用给这个路由注册一个通配符的子路由,内容为空。
const routes: Routes = [
{
path: 'portal',
component: PortalComponent,
children: [{ path: '**', component: EmptyComponent }],
},
];
微应用的 activeRule 需要包含主应用的这个路由 path。
registerMicroApps([
{
name: 'app1',
entry: 'http://localhost:8080',
container: '#container',
activeRule: '/portal/app1',
},
]);
在这个路由组件的 ngAfterViewInit 周期调用 start 函数,注意不要重复调用。
import { start } from 'qiankun';
export class PortalComponent implements AfterViewInit {
ngAfterViewInit(): void {
if (!window.qiankunStarted) {
window.qiankunStarted = true;
start();
}
}
}