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

相关推荐
srrsheng2 分钟前
电商前端Nginx访问日志收集分析实战
运维·前端·nginx
飏旎4 分钟前
对于前端闭包的详细理解
前端·状态模式
拾光拾趣录7 分钟前
前端的单元测试
前端·单元测试
风清云淡_A44 分钟前
【Flutter3.8x】flutter从入门到实战基础教程(四):自定义实现一个自增的StatefulWidget组件
前端·flutter
curdcv_po1 小时前
🔥 Three.js 一个项目用到:轨道控制器、动画与GUI交互
前端
琹箐1 小时前
CSS font-weight:500不生效
前端·css
代码的余温1 小时前
React核心:组件化与虚拟DOM揭秘
前端·react.js·前端框架
小螺号dididi吹1 小时前
【React】状态管理
前端·javascript·react.js
代码的余温1 小时前
React Refs:直接操作DOM的终极指南
前端·javascript·react.js
一只小风华~1 小时前
JavaScript 定时器
开发语言·前端·javascript·vue.js·web