qiankun微服务架构下子应用路由跳转问题

qiankun微服务架构下子应用路由跳转问题

背景

在最近qiankun.js微服务架构的后台管理中，进入子应用内页后再返回，会覆盖掉上一级路由的情况，造成页面跳转混乱问题。

eg:

开始页面 动作 结束页面 跳转结果 预期结果
子应用B/a/list 进入 子应用B/b/list 正常 正常进入B/b/list ✔
子应用B/b/list 进入 子应用B/b/content 正常 正常进入B/b/content ✔
子应用B/b/content 返回 子应用B/a/list 错误❌ 返回到子应用B/b/list ❗❗❗

解决方案

  1. 使用window.location.href方法进行跳转，可以解决问题。但在跳转时候会出现页面刷新动作，和目前的SPA格格不入，可做为应急解决方法。

  2. 调用window.history.pushState，这个在网上看是可以，未实践。

  3. 把主应用的 history 以 props 的形式传给子应用 ，子应用跳转路由使用主应用的router。

    1. 主应用router/配置

      正常写router文件

      const routes = [
    {
        path: '/',
        component: '...'
    },
    ...
]
Vue.use(Router)
const router = new VueRouter({
  mode: "history",
  routes,
})
export default router;

  4. 主应用main.js通过props传递router

    ***
import router from "./router"
***

// 注册子应用
registerMicroApps([
    {
        name: 'gwapp', // 子应用名称口
        entry: process.env.NODE_ENV === 'development' ? '//192.168.0.1:9000/b/' : '//192.168.0.2:9000/b/',    // 子应用入口
        container: '#B',    // 子应用所在容器
        activeRule: process.env.NODE_ENV === 'development' ? '/b' : '/B/b',            // 子应用触发规则（路径）
        props: {
            mainAppRouteBase: router
        }

    },
],

***

  5. 子应用main.js接收与注册全局

    ***

function render(props) {
  // 接收
  const { container, mainAppRouteBase } = props
  app = createApp(App)
    // 注册全局
  app.provide('mainAppRouteBase', mainAppRouteBase)
  ***
  app.mount(container instanceof Element ?
    (container.querySelector("#B")) :
    (container)
  )

***

  6. 子应用组件内使用

    import { inject } from 'vue';

const mainAppRouteBase = inject('mainAppRouteBase');

// 跳转页面
mainAppRouteBase.push('/B/b/content')

// 返回页面
mainAppRouteBase.back();



参考链接： Qiankun微应用之间路由跳转📩 - 掘金