A微应用如何跳转到B微应用

需求

A微应用如何跳转到B微应用

A微应用挂到菜单上，点击A应用里面的某个内容弹出B应用，实现方式

A微应用中：

  import { useMicroStore } from '@common/store/micro-store';
  const microStore = useMicroStore();
  microStore.emitMicro(
        'B微应用的编码',
        '触发微应用的事件名',
        {a: 1,b: 2}',
        () => {
            // 回调函数
        },
    );

B微应用中：

    import { useMicroStore } from '@common/store/micro-store';
    // 获取子应用store
    const microStore = useMicroStore();
    microStore.on('触发微应用的事件名', ( {a, b}, fn) => {
        // ...业务逻辑
    });

注意： 其中编码的字段类型是字符串， 触发微应用的事件名的字段类型是字符串， 参数的字段类型是对象

A, B微应用挂到菜单上，点击A应用里面的某一内容跳到 B菜单

1. 在开发–>脚本套件–>全局脚本库中增加一个方法吗，

   const { watch } = JE.useVue();
   watch(() => JE.$router.currentRoute, () => {
    JE.useAdmin()?.adminStore.emitMicroAll('admin-router-change', { route: JE.$router.currentRoute });
   }, { deep: true })

   

在A微应用中
1.将参数放到缓存里面
2.跳转对应的菜单

    import { useMicroStore } from '@common/store/micro-store';
    // 获取子应用store
    const microStore = useMicroStore();
    microStore.emitAdmin('admin-openmenu', { menuId: 菜单id });

在B微应用中

    import { useMicroStore } from '@common/store/micro-store';
    // 获取子应用store
    const microStore = useMicroStore();
    microStore.on('admin-router-change', (route => {
        // ...业务逻辑
    });

注意：这种实现方式的话，把参数放到缓存里面