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

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配置的区别

相关推荐
鹏多多2 分钟前
React状态管理库Zustand的实用教程
前端·javascript·react.js
excel10 分钟前
前端安全必修课:用 Web Cryptography API 玩转加密、签名、派生与密钥管理
前端
江城开朗的豌豆14 分钟前
useLayoutEffect:你以为它和useEffect是"亲兄弟"?其实差别大了!
前端·javascript·react.js
江城开朗的豌豆19 分钟前
聊聊useEffect:谁说副作用不能“优雅”?
前端·javascript·react.js
!执行20 分钟前
开发electron时候Chromium 报 Not allowed to load local resource → 空白页。
前端·javascript·electron
top_designer24 分钟前
告别“复制粘贴”式换肤:我用Adobe XD组件变体与CC库,构建多品牌设计系统架构
前端·ui·adobe·系统架构·ux·设计师·adobe xd
赛博切图仔39 分钟前
面试手写 Promise:链式 + 静态方法全实现
前端·javascript·面试
掘金安东尼44 分钟前
互联网不再由 URL 为核心入口
前端·人工智能·github
Moment1 小时前
面试官:用户访问到一个不存在的路由,如何重定向到404 Not Found的页面 ❓❓❓
前端·javascript·面试
前端小巷子1 小时前
深入 Vue3 computed
前端·vue.js·面试