有没有大佬写过这种, 基座应用为vite + vue3, 多页签的应用, 多个子应用也是vite+vue3, 基座应用左侧配置, 子应用的菜单,有大佬提供demo吗, 不胜感激

[mzcc666GtHb]

No description provided.

[liuxiucai]

@mzcc666GtHb 官方例子中已经有这类demo

大体的思路,主应用左侧的菜单配置子应用的路径信息（主要是path），主应用通过 消息的形式把路径信息发送给 子应用，子应用接受之后，使用自身的router进行页面的跳转。

1. vite+vue3 的主应用 建立消息通行 与 发生路径

• 主应用 发送 子应用路径信息 - 更多详情

      // 主应用通过下发data数据控制子应用跳转
      microApp.setData(appName, { path: childPath })

• 信息通信-更多详情

import { EventCenterForMicroApp } from '@micro-zoe/micro-app'
// @ts-ignore 因为vite子应用关闭了沙箱，我们需要为子应用appname-vite创建EventCenterForMicroApp对象来实现数据通信
window.eventCenterForAppNameVite = new EventCenterForMicroApp('appname-vite')

2. 子应用接受路径消息跳转

更多详情

    // 监听基座下发的数据变化
    window.eventCenterForAppNameVite.addDataListener((data: Record<string, unknown>) => {
      console.log('child-vite addDataListener:', data)

      if (data.path && typeof data.path === 'string') {
        data.path = data.path.replace(/^#/, '')
        // 当基座下发path时进行跳转
        if (data.path && data.path !== router.currentRoute.value.path) {
          router.push(data.path as string)
        }
      }
    })