qiankun 路由选择不同模式如何书写不同的配置

首先，我们了解一下qiankun中如何命中子应用的，假设主应用使用history，子应用也是用history模式，activeRule 的规则为**/sub-app**，当浏览器地址栏输入http://localhost:8080/sub-app/index 时，则命中规则;反之http://localhost:8080/#/sub-app/index 或者 http://localhost:8080/#/child/sub-app/index ，都不会命中规则。

下面介绍一下不同情况的路由模式该如何配置

1.当主应用和子应用都使用history模式时（最简单，推荐）

重点是base 需和主应用的activeRule保持一致

js 复制代码

// 主应用
import { start, registerMicroApps } from "qiankun"

registerMicroApps([
  {
    name: 'app1',
    entry: '//localhost:8081',
    container: '#container',
    activeRule: '/app1',
    props: {}
  }
])

start()

子应用vue3，重点是createWebHistory(routerBase)

js 复制代码

// 子应用 router/index.js
const routerBase = window.__POWERED_BY_QIANKUN__ ? '/app1' : '/'
const router = createRouter({
  history: createWebHistory(routerBase),
  routes
})

子应用vue2

js 复制代码

// 子应用router/index.js
const routerBase = window.__POWERED_BY_QIANKUN__ ? '/app1' : '/'
const router = new VueRouter({
  base: routerBase,
  routes,
  mode: 'history'
})

2.主应用和子应用都使用hash模式

注意hash模式，主应用activeRule需要加上**"#"**

js 复制代码

// 主应用
import { start, registerMicroApps } from "qiankun"

registerMicroApps([
  {
    name: 'app1',
    entry: '//localhost:8081',
    container: '#container',
    activeRule: '#/app1',
    props: {}
  }
])

start()

而子应用有两种方式：

给所有路由加上前缀，前缀需要和activeRule保持一致，即/app1

创建一个空路由，将其他路由全部放入该路由的children中，例如

js 复制代码

const routes = [
  {
    path: "/app1",
    component: HomeView,
    children: [
      {
        path: "home",
        name: "home",
        component: HomeView,
      },
      {
        path: "about",
        name: "about",
        component: () =>
          import(/* webpackChunkName: "about" */ "../views/AboutView.vue"),
      },
    ],
  },
];

关于router base和publicPath的作用，请看这篇文章Vue中路由router的base配置与vue.config.js的publicPath配置的区别