qiankun接入子应用的某个路由页面问题

527 阅读1分钟

需求:

  • 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')
    }],
});