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

[Ttou]

问题描述

1. 子应用无法跳转到另一个子应用的指定页面
2. 子应用内部发生路由跳转时，主应用的 router-link 无法更新激活状态

复现步骤

1. pnpm i
2. pnpm dev

上传截图

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

路由配置

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

export default new VueRouter({
  mode: 'history',
  base: '',
  routes: [
    {
      path: '/',
      redirect: '/home'
    },
    {
      path: '/home',
      name: 'home',
      component: () =>
        import(/* webpackChunkName: "Home" */ '@/views/home/index.vue')
    },
    {
      path: '/vue2',
      name: 'vue2',
      component: () =>
        import(/* webpackChunkName: "Vue2" */ '@/views/vue2/index.vue')
    },
    {
      path: '/vue3',
      name: 'vue3',
      component: () =>
        import(/* webpackChunkName: "Vue3" */ '@/views/vue3/index.vue')
    }
  ]
})

侧边栏配置

子应用跳转逻辑

效果

复现仓库

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

https://github.com/Ttou/micro-app-issue

环境信息

• micro-app版本：1.0.0.rc.5
• 主应用前端框架&版本：vue2
• 子应用前端框架&版本：vue2 & vue3
• 构建工具&版本：vue-cli

[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 })
  }
}