乾坤下各子模块有路由时如何跳转到其他模块子路由

365 阅读2分钟

需求: 主应用(或者其他微应用)通过loadMicroApp 去其他微应用子路由

背景:如下应用模块

  • 主应用 localhost:3000

  • 微应用A localhost:7105

    
      router = new VueRouter({
          base: window.__POWERED_BY_QIANKUN__ ? '/vueapp/' : '/',
          mode: routeModule,
          routes,
      });
    
    { path: '/', name: "home", component: Home },
    { path: '/about', name: "about", component: About },
    
    

所以 在qiankun中 访问 微应用A 的两个地址为

  • localhost:7105/vueapp
  • localhost:7105/vueapp/about

一旦加载vueapp, url地址栏就会变成 localhost:3000/vueapp,

而在微应用切换路由到about后 地址会变成localhost:3000/vueapp/about,

所以可以得出结论是,

1 主应用和各个子应用 共用同一个url地址栏路径, 激活不同的微应用的路由,则会把当前url地址栏path切换到自己应用对应的路由path,

2 通过loadMicroApp 只能通过entry去加载到一个应用的主入口 也就是main.js, 不能直接加载微应用二级路由,想达到以上效果 需要通过其他方式变通,

2.1 变通方式1 (推荐)

微应用路由用abstract模式 详情见 github.com/umijs/qiank… ,变成abstract之后,被跳转的子应用就无法直接通过路由访问自己的二级路由了,所以我们可以再微应用main.js去判断特定参数如果是通过loadMicroApp加载的则用abstract路由,否则就是普通history路由,同时跳转到二级路由 即可解决

企业微信截图_16970200313088.png

企业微信截图_16970200512304.png

2.2 变通方式2 不用abstract方式 (不太好)

让微应用的路由和被跳转的应用的路由一致,

如原微应用路由 / 和 'details/:id' 两种情况

企业微信截图_169702019569.png

让被跳转的微应用的路由的前缀和原微应用路由一致, 这样在微应用中切换路由时候再刷新也不会让原来微应用丢失路由响应 企业微信截图_16970202653877.png

  • vuecli4 下 多仓库下业务组件复用

1 抽取到npm 2升级 vuecli4 到 vuecli5 (webpack5)