native 路由模式下，主应用 history，子应用 hash，子应用无法跳转到另一个子应用的指定页面 about micro-app

[bailicangdu]

1、主、子之间的路由系统是完全独立的，无法相互影响，子应用或主应用跳转一个地址后另一方不会主动响应 2、geBaseAppRouter获取的是主应用的router实例，这里是vue-router，所以跳转方式参考vue-router的文档

[Ttou]

是不是主应用的 vue-router 只能激活到某个子应用首页，不能跳转到其他的页

[Ttou]

确认下流程，目前从主应用跳转到另一个子应用具体页面：

• 判断目标子应用是否已激活
  • 是：使用 microApp.router.push 跳转
  • 否：使用 vue-router 先跳转目标子应用，同时下发数据通知子应用跳转到对应页面

[bailicangdu]

确认下流程，目前从主应用跳转到另一个子应用具体页面：

• 判断目标子应用是否已激活

  • 是：使用 microApp.router.push 跳转
  • 否：使用 vue-router 先跳转目标子应用，同时下发数据通知子应用跳转到对应页面

第一点正确，第二点vue-router直接跳转目标页面即可，子应用会根据url进行渲染的

[Ttou]

不行，子应用没激活的时候，vue-router 跳不到指定页面，路由需要特殊配置吗

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({ name })
    // microApp.setData(name, {
    //   type: 'route-change',
    //   payload: { path: path.replace('/#', '') }
    // })
    router.push({ path: '/vue2/#/dialog' })
  } else {
    console.log('子应用已激活，直接跳转路由')
    microApp.router.push({ name, path })
  }
}

[bailicangdu]

你这不是native模式，是search模式，通过设置defaultPage可以指定默认页面 https://micro-zoe.github.io/micro-app/docs.html#/zh-cn/router?id=%e8%ae%be%e7%bd%ae%e9%bb%98%e8%ae%a4%e9%a1%b5%e9%9d%a2

[Ttou]

试出来了，vue-router 跳转前需要对路径做编码

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)}` })
  } else {
    console.log('子应用已激活，直接跳转路由')
    microApp.router.push({ name, path })
  }
}