qiankun微前端路由

最新推荐文章于 2025-04-07 12:57:16 发布
最新推荐文章于 2025-04-07 12:57:16 发布
阅读量777 收藏 1
点赞数
分类专栏： 我是一只酸菜鱼
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_18747089/article/details/119418048
版权
本文记录了在使用qiankun微前端框架时，如何处理主应用与微应用路由的前缀问题以及路由模式的选择。在实践中，主应用与微应用的activeRule需设置相同前缀，同时描述了在从hash模式到history模式重构中遇到的挑战与解决方案。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

最近在倒腾微前端，做个小记录

1.主应用带前缀，微应用的activeRule里面也要加上前缀

主应用里
在这里插入图片描述
在这里插入图片描述
微应用里
在这里插入图片描述

2.路由模式

由于项目是重构，之前用的hash模式改了有些东西会受影响，就没动 ，所以我的主应用是hash模式，微应用也用的hash模式 (微应用用history模式会有问题 时间不允许我倒腾了 就这样吧)
在这里插入图片描述
子应用的路由
在这里插入图片描述

最低0.47元/天 解锁文章
vue3+qiankun项目搭建_qiankun vue3创建路由(1)
2401_84437604的博客
07-12 617
component: () => import(‘@/components/child’) //绑定一个child组件。“Access-Control-Allow-Origin”: “*”, // 允许跨域访问子应用页面。// 注意需要引入public-path。“Access-Control-Allow-Origin”: “*”, // 配置跨域。/public-path’ // 引入public-path文件。‘/vue’ : ‘/’, // qiankun进入子应用时，返回true。
乾坤qiankun搭建前端微服务
qq_43692768的博客
08-19 1365
微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。
qiankun子应用的图片不带域名前缀
anan0709的博客
08-30 261
1.变量__webpack_public_path__不需要window前缀，作为window的属性。如果出现下面这情况，子应用的图片是uri，不是完整的url，2.需要在引入app组件之前引入 public-path。检查完这两点后，看看图片是否为子应用的完整url。如有其他问题请在评论区留言。
qiankun微前端
最新发布
D_insist_on的博客
04-07 323
微前端：简单说就是前端版本的微服务，将一个大型前端应用拆分成了多个模块，每个模块可以由不同团队进行管理和开发，框架自由、仓库自由，且能够独立部署。中文官网：https://zh-hans.single-spa.js.org/docs/getting-started-overview/实现方式：每个子应用通过iframe标签嵌入父应用，利用iframe标签的隔离属性，可做到子与子、子与父互不影响。官网：https://qiankun.umijs.org/zh。。
qiankun微前端路由模式
weixin_43825389的博客
10-27 1万+
qiankun在vue框架下history 和hash路由模式的使用 一、主应用是hash模式 说明 当主应用是 hash 模式时，一般微应用也是 hash 模式。主应用的一级 hash 路径会分配给对应的微应用（比如 #/base1 ），此时微应用如果需要在 base 路径的基础上进行 hash 模式下的二级路径跳转（比如 #/base1/child1 ），这个场景在当前 VueRouter 的实现方式下需要自己手动实现，给所有路由都添加一个前缀即可。VueRouter 的 hash 模式下的 ba
qiankun打开外链，如何防止路由自动带上微应用路由前缀
申小兮和林小兮的博客宝
06-27 590
qiankun打开外链，如何防止路由自动带上微应用路由前缀
umi + qiankun + vue 微前端动态路由及数据共享学习笔记
weixin_39081625的博客
04-30 3765
Demo技术组合选择 主应用 UmiJS ， 子应用同时支持 Umi , Vue2.x , Vue3.x(不稳定) demo示例 https://github.com/ldinger/umi-qiankun-vue-demo.git 说明 ：本例是参考 umi-plugin-qiankun 添加了vue 子应用 。 applications 为所有应用目录 ， 安装完环境 后在各各应用目录 分别 执行 tyarn 或者 yarn 安装 依赖 包后在根目录执行 tyarn start master
5-3 微前端框架-路由拦截
bus_lupe的博客
04-05 2883
// 重写window的路由跳转 export const rewriteRouter = () => { window.history.pushState = patchRouter(window.history.pushState, 'micro_push') window.history.replaceState = patchRouter(window.history.replaceState, 'micro_replace') window.addEventListener('
qiankun乾坤快速简单完整的微前端解决方案
08-08
2. **路由管理**：qiankun集成并支持主流的前端路由库，如React Router、Vue Router等，通过全局路由守卫实现子应用的路由跳转和通信。通过`setRouteGuard`可以设置全局路由守卫，确保在主应用和子应用之间平滑过渡...
乾坤 微前端和其他区别
05-23
3. 一体化：乾坤提供了一套完整的解决方案，包括路由、通信、打包等多个方面，可以快速构建一个完整的微前端应用程序。 4. 兼容性：乾坤支持多个浏览器和移动设备，可以满足不同用户的使用需求。 总的来说，乾坤是...
乾坤微前端框架实践教程：探索与实现
qiankun是一个基于single-spa的微前端实现库，可以用来构建一个运行多个独立前端应用的JavaScript微服务框架。微前端是一种架构方式，允许我们将一个复杂的应用程序分解为小的、独立的、可单独开发和部署的前端应用...
vite-plugin-qiankun:保留vite es特性，快速接入乾坤微前端子应用
08-04
vite-plugin-qiankun: 帮助应用快速接入乾坤的vite插件 保留vite构建es模块的优势 一键配置，不影响已有的vite配置 快速开始 1、在 vite.config.ts 中安装插件 // vite.config.ts import qiankun from 'vite-plugin-...
微前端 qiankun 项目实践 !!! 防踩坑指南
程序员成长指北
05-05 1万+
作者：zxh1307原文地址：https://juejin.im/post/5ea55417e51d4546e347fda9导语最近在做微前端的项目 , 过程中真是踩了不少坑 , 在有限...
微前端之实践子应用的注册、路由拦截和获取首个子应用
浮生离梦的博客
07-09 1734
一、微前端之实践子应用的注册、路由拦截和获取首个子应用 1. 子应用的注册，如下所示： - 首先需要一个子应用注册的列表，在主应用 `main` 的 `store` 文件夹中，新建 `sub.js`，对外暴露 `subNavList` 这个子应用的列表。`subNavList` 是一个数组，每一个子元素都是一个子应用，`name` 是子应用名称，唯一 `ID`； `entry` 是子应用的入口，获取到子应用的文件；`container` 是子应用的渲染内容，显示在哪个容器中；`activeRule` 是子.
微前端乾坤（qiankun）初尝试
gdutRex的博客
03-01 3368
介绍 qiankun 是一个基于 single-spa 的微前端实现库，旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统。 公司有一个门户网站需要嵌入其他系统，使用iframe会有很多的兼容性问题，如果使用qiankun框架，不仅可以绕过这些iframe的坑，还可以进行很多的“骚操作”。 快速上手 qiankun官网的快速上手很简单，不是因为他们懒得写，而是引入qiankun的确是非常简单。 只需要在主应用中引入qiankun,微服务做相应的配置，就可以，下面就介绍我在项目中如何引入。 主应用
虚拟路由--微前端-qiankun
u010707194的博客
06-10 940
微前端 虚拟路由 qiankun
微前端qiankun从头写一个demo，包含主微应用、微微应用通信用例
Yoyo_Yan的博客
08-17 1780
文章目录qiankun 微前端 demo 说明1. 路由说明：1.1 hash 路由：1.2 history 路由：路由切换2. LifeCycles:3. 父子通讯3.1主应用与微应用的通信3.2微应用之间的通信3. 手动加载微应用4. css隔离5. js隔离Trouble Shooting qiankun 微前端 demo 说明 demo传送门 启动： $ npm start 项目文件说明见 ProjectTree.md。 通过npm-run-all包启动所有应用，主应用 main-app 采用动
qiankun微应用之间、主微应用之间相互跳转方式总结与实践
热门推荐
qq_41885295的博客
07-31 2万+
qiankun 主子应用、子应用间跳转方案
qiankun 微前端应用实践
weixin_45653441的博客
12-08 407
qiankun这个库只需要在基座引入，在main.ts 中注册子应用,为了方便管理，我们将子应用的配置都放在：/src/qiankun.js下。主应用注册这个路由时给 path 加一个 *，注意：如果这个路由有其他子路由，需要另外注册一个路由，仍然使用这个组件即可。基座采用是的 Vue3 + vite + ts，只负责导航的渲染和登录态的下发，为子应用提供一个挂载的容器div，由于路由模式为history，需要匹配子应用的入口规则，修改src/router/index。然后在src/main.ts中引入。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

中小余

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值