基础使用请参考qiankun官网https://qiankun.umijs.org/zh

进阶使用会遇到如下问题

  1. 主应用和子应用都有router，如何匹配
  2. 主应用如何切换子应用中的路由
  3. 主应用和子应用同源如何配置

主应用和子应用都有router，如何匹配

注册子应用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
registerMicroApps([
  {
    name: 'child1', // app name registered
    entry: '//localhost:7001/',
    container: '#childApp',
    activeRule: '/main/child1',
  },
  {
    name: 'child2',
    entry: '//localhost:7002/',
    container: '#childApp',
    activeRule: '/main/child2',
  },
]);

主应用中路由配置，所有子应用对应的组件建议是空组件EmptyPage，因为同时会加载子应用和主应用的组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
{
    path: '/main',
    name: 'Layout',
    component: () => import('../views/Layout.vue'),
    children:[
      {
        path: 'user',
        name: 'user',
        component: () => import('../views/UserPage.vue')
      },
      {
        path: 'child1/:pathMatch(.*)*',
        name: 'child1',
        component: () => import('../views/EmptyPage.vue'),
        
      },
      {
        path: 'child2/:pathMatch(.*)*',
        name: 'child2',
        component: () => import('../views/EmptyPage.vue'),
        
      },
}

其中layout.vue代码就是搭建一个框架,其中的router-view是为了在主应用中切换子应用，childApp的div是为了挂载渲染子应用

1
2
3
4
5
6
7
/** Layout.vue **/
<template>
  <div>This is Dashboard On Main App</div>
	<Narbar/>
  <router-view></router-view>
  <div id="childApp"></div>
</template

子应用的路由配置

1
webHistory = createWebHistory('/main/child1')

主应用如何切换子应用中的路由

在主应用中切换各个子应用就是普通的路由切换

1
2
router.push(’/main/child1’)
router.push(’/main/child2’)

在主应用中切换子应用内部的子路由，发送消息给子应用，让子应用自行切换，参考qiankun官方应用通信样例https://qiankun.umijs.org/zh/api#initglobalstatestate

主应用：

1
2
3
4
5
6
7
8
9
10
11
12
import { initGlobalState, MicroAppStateActions } from 'qiankun';

const state = {path:{child1:'/about'}}
// 初始化 state
const actions: MicroAppStateActions = initGlobalState(state);

actions.onGlobalStateChange((state, prev) => {
  // state: 变更后的状态; prev 变更前的状态
  console.log(state, prev);
});
actions.setGlobalState(state);
actions.offGlobalStateChange()

微应用：

1
2
3
4
5
6
7
8
9
10
// 从生命周期 mount 中获取通信方法，使用方式和 master 一致
export function mount(props) {
  props.onGlobalStateChange((state, prev) => {
    // state: 变更后的状态; prev 变更前的状态
    console.log(state, prev);
    router.push(state.path.child1)
  });

  props.setGlobalState(state);
}

主应用和子应用同源如何配置

简单的情况就是像上面代码一样，主应用和子应用不同源，然后直接加载，如果同源的话会复杂一些。因为域名端口全部都一样，我们能做的只有修改路径。

这时候我们会面临两个问题

  1. 所有应用都会多加一个后缀
  2. 独立子应用的路径和主应用加载自应用的路径要不一致，如果一样会出现刷新页面只加载子应用，不加载主应用的情况。

至于原理就很简单浏览器优先向服务器请求资源，这个时候还轮不到前端路由发挥，自然就加载子应用了。

针对上面两个问题我们一步一步解决

第一个问题：在所有应用后面加载publicPath,前端路由的base保持一样。

1
2
3
4
5
6
7
8
// 主应用
base = /main
publicPath = /main

//子应用 
base = /single-main/single-child1
publicPath = /single-main/single-child1

第二个问题：在子应用的路由base上做文章,如果是qiankun启动就设置为和qiankun一样的base路径，不是就是用single开头的路径

1
2
3

webHistory = createWebHistory(window.__POWERED_BY_QIANKUN__ ? '/main/child1' : '/single-main/single-child1')

最后修改一下主应用注册的地方

1
2
3
4
5
6
7
8
9
10
11
12
13
14
registerMicroApps([
  {
    name: 'child1', // app name registered
    entry: '/single-main/single-child1',
    container: '#childApp',
    activeRule: '/main/child1',
  },
  {
    name: 'chidl2',
    entry: '/single-main/single-child2',
    container: '#childApp',
    activeRule: '/main/child2',
  },
]);

所有核心点都已列出，欢迎指正错误和不足