MicroApp

每个应用的路由实例都是不同的，应用的路由实例只能控制自身，无法影响其它应用，包括主应用无法通过控制自身路由影响到子应用。

常见的问题如：开发者想通过主应用的侧边栏跳转，从而控制子应用的页面，这其实是做不到的，只有子应用的路由实例可以控制自身的页面。

要实现应用之间的跳转有两种方式：

方式一、window.history

通过history.pushState在新窗口打开或history.replaceState在新窗口打开进行跳转。

例如：

window.history.pushState(history.state, '', 'page2')

// 主动触发一次popstate事件
window.dispatchEvent(new PopStateEvent('popstate', { state: history.state }))

对于hash路由也同样适用

window.history.pushState(history.state, '', '#/page2')

// 主动触发一次popstate事件
window.dispatchEvent(new PopStateEvent('popstate', { state: history.state }))

注意事项

  1. popstate事件是全局发送的，所有正在运行的应用都会接受到新的路由地址并进行匹配，要防止兜底到应用的404页面。
  2. window.history并非适用于所有场景，一些框架如vue-router4，angular会出现问题，此时建议使用下面的方式2、3。

方式二、通过数据通信控制跳转

适用场景: 主应用控制子应用跳转

子应用中监听数据变化

// 监听主应用下发的数据变化
window.microApp.addDataListener((data) => {
  // 当主应用下发跳转指令时进行跳转
  if (data.path) {
    router.push(data.path)
  }
})

主应用下发跳转指令

import microApp from '@micro-zoe/micro-app'

microApp.setData('子应用name', { path: '/new-path/' })

方式三、传递路由实例方法

适用场景: 子应用控制主应用跳转

主应用下发pushState函数：

import { useEffect } from 'react'
import { useHistory } from 'react-router-dom'
import microApp, { removeDomScope } from '@micro-zoe/micro-app'

export default () => {
  const history = useHistory()

  function pushState (path) {
    removeDomScope()
    history.push(path)
  }

  useEffect(() => {
    // 👇 主应用向子应用下发一个名为pushState的方法
    microApp.setData(子应用名称, { pushState })
  }, [])

  return (
    <div>
      <micro-app name='子应用名称' url='url'></micro-app>
    </div>
  )
}

<template>
  <micro-app
    name='子应用名称' 
    url='url'
    :data='microAppData'
  ></micro-app>
</template>

<script>
import { removeDomScope } from '@micro-zoe/micro-app'

export default {
  data () {
    return {
      microAppData: {
        pushState: (path) => {
          removeDomScope()
          this.$router.push(path)
        }
      }
    }
  },
}
</script>

子应用使用pushState控制主应用跳转：

window.microApp.getData().pushState(path)