开启keep-alive后，子应用与子应用切换问题

[isatis-summer]

问题描述

问题的具体描述

复现步骤

1.路由模式为：native，并开启keep-alive； 2.主应用访问A子应用a1页面（正常显示），切换到B应用b1页面（正常显示），但是如果从B应用b1页面切到A应用a2页面，此时页面显示的是a1页面。

上传截图

请上传代码截图、控制台、终端等截图以帮助我们了解您的问题。

复现仓库

请提供一个精简的代码仓库，然后上传到自己的 github，以帮助我们复现您的问题。

环境信息

• micro-app版本：dev版本
• 主应用前端框架&版本：vue3
• 子应用前端框架&版本：vue2
• 构建工具&版本：

[isatis-summer]

目前采取的解决方案：先判断之前缓存的子应用路由是否和当前需要跳转的路由一致，一致的情况直接使用路由跳转，不一致调用卸载方法unmountApp(microApp.code, {clearAliveState: true})，然后在回调里执行路由跳转。

[Ttou]

确实有这个问题

[Ttou]

我的处理是在保活的子应用里加一个数据监听事件，如果主应用在跳转后发现跳转的路径与跳转后的路径不一致，向子应用下发数据触发再次跳转

主应用

import microApp from '@micro-zoe/micro-app'
import type VueRouter from 'vue-router'

interface Options {
  name: string
  path: string
}

export function useJumpApp({ name, path }: Options, router: VueRouter) {
  console.log('跳转子应用', name, path)

  if (!microApp.getActiveApps({ excludeHiddenApp: true }).includes(name)) {
    console.log('子应用未激活，需先渲染')
    router
      .push({ path: `/${name}?${name}=${encodeURIComponent(path)}` })
      .then(() => {
        if (path !== microApp.router.current.get(name)?.fullPath) {
          console.log('子应用已渲染，但路由未匹配，需手动跳转')
          microApp.setData(name, {
            type: 'route-change',
            payload: { path, replace: true }
          })
        }
      })
  } else {
    console.log('子应用已激活，直接跳转路由')
    microApp.router.push({ name, path })
  }
}

子应用

import { useRouter } from 'vue-router'

function getPushOptions(data: Record<string, any>) {
  if (data.path) {
    data.path = data.path.replace('/#', '')
  }

  return data
}

export function useDataListener() {
  const router = useRouter()

  window.microApp?.addDataListener(data => {
    switch (data.type) {
      case 'route-change':
        router.push(getPushOptions(data.payload))
        break
      default:
        break
    }
  }, true)
}