需求:
- react项目中使用qiankun对接某个vue应用的具体路由页面
- 子应用的路由页面为http://localhost:8080/about/ 方法:
- 在父应用注册子应用时,activeRule属性包含子应用的路由地址 实现:
#react
registerMicroApps([
{
name: "vue-app",
entry: "http://localhost:8080",
container: "#bar",
activeRule: "/bar/about", //此处应在/bar/about路由下注册
},
]);
start();
#vue
router = new VueRouter({
base: window.__POWERED_BY_QIANKUN__ ? '/bar/' : '/',
// base: /bar/ => about页面
// base: /bar/about => /页面
mode: 'history',
routes: [{
path: '/',
component: () => import('./components/HelloWorld.vue')
}, {
path: '/about',
component: () => import('./components/About.vue')
}],
});