前端微服务（qiankun）哈希路由实践(代码片段)

关键词：

最近公司搞前端微服务，用了qiankun这个库，不得不说背靠轮子好乘凉啊~。

qiankun介绍戳这里  https://qiankun.umijs.org/zh

先看下效果

下面进入正题：

我的项目，技术栈都是vue，主应用拥有自己的公共模块，同时需要以微应用方式嵌入业务模块。大概如下图所示

因为我主应用用的哈希路由，微应用参考官方demo用的都是history方式的路由，就导致路由变化比较蛋疼，比如现在有专门的路由#/micrApp来展示微应用，同时注册了微应用dev，通过/dev方式跳转：

从主应用的#/organ/manage路由切换到微应用/dev，url就会变成/dev/#/organ/manage，并且如果微应用上有router-link标签跳转如<router-link to="/about">，url就会变成/dev/about/#/organ/manage。

想要的结果，我理想的路由应该是微应用路由作为主应用路由的一部分，跳转后应该是/#/mricrApp/dev和#/mricrApp/dev/about。

为了达到这种效果，需要进行以下改造：

1.修改微应用路由方式，改为哈希路由，同时增加路由判断，当应用运行在qiankun里时，为所有路由和在路由跳转前为跳转路由path加上micrApp前缀。（图中的packInfo.name就是微应用的项目名，这里是dev）

 2.修改主应用注册应用时的路由匹配规则和增加主应用路由

    path: `/micrApp/dev`,//匹配微应用跳转
    component: () => import(‘@/views/prod/index‘),
    name: ‘dev‘,
    meta:  
      title: ‘开发环境‘, 
      icon: ‘jigou‘,
      isMicrApp:true,
    ,
  ,
  
    path: `/micrApp/dev/:micrAppRoute`,//匹配微应用内的路由跳转
    hidden:true,
    component: () => import(‘@/views/prod/index‘),
    name: ‘dev‘,
    meta:  
      title:‘开发环境‘,
      isMicrApp:true, 
    ,

基于qiankun的微前端实践(代码片段)

若干子应用接入问题：1.子应用不能直接对外暴露，如果附着在主应用，如何处理代理2.浏览器的Route路径需要处理，满足既能匹配主项目，又能匹配子项目3.静态资源需要处理，满足可以直接访问到子应用... 查看详情

微前端qiankun架构(基于vue2实现)使用教程(代码片段)

...版本node-->16+@vue/cli-->5+创建文件创建文件夹qiankun-test。使用vue脚手架创建主应用main和子应用dev 主应用安装qiankun:yarnaddqiankun或者npmiqiankun-S使用qiankun：在utils内创建微应用文件夹microApp,在该文件夹内创建微应用出... 查看详情

探索微前端的场景极限(代码片段)

本文主要介绍总结了一些基于qiankun的微前端应用场景与实践基础场景与路由绑定的方式渲染微应用通常情况下，我们接触的最多的微前端的实践，是以URL/路由为维度来划分我们的微应用，以OneX平台（蚂蚁金融云... 查看详情

深入浅出解析阿里成熟的微前端框架qiankun源码图文并茂(代码片段)

...3229 ）https://github.com/a1029563229/blogs/blob/master/Source-Code/qiankun/1.md本文将针对微前端框架 qiankun 的源码进行深入解析，在源码讲解之前，我们先来了解一下什么是 微前端。微前端 是一种类似于微服务的架构&# 查看详情

qiankun微前端框架处理

...路由变化，加载不同的应用，实现应用解耦，single-spa、qiankun组合式集成：组件单独打包发布，类似于npm包EMP：主要基于Webpack5ModuleFederationwebcomponents：我们采用的是qiankun，主要思路是将一个大应用，拆分为更小的、可独立开发... 查看详情

基于微前端qiankun的多页签缓存方案实践

...联网前端团队-TangXiao本文梳理了基于阿里开源微前端框架qiankun，实现多页签及子应用缓存的方案，同时还类比了多个不同方案之间的区别及优劣势，为使用微前端进行多页签开发的同学，提供一些参考。一、多页签是什么？我... 查看详情

qiankun框架对于微前端的解耦和沙盒与实战探索心得(代码片段)

@[toc]qiankun框架由于主应用程序和微应用程序可以独立于技术堆栈，所以qiankun只是一个面向用户的类似jQuery的库。需要调用几个API来完成应用程序的微前端转换。同时，由于qiankunHTML入口和沙盒的设计，微应用程序的访问与使用if... 查看详情

qiankun+vue(二)

...目的需求。在网上看到的一篇文章里写的比较详细可参考qiankun微前端实践总结（二）每日优鲜供应链前端团队微前端改造也很有参考价值 查看详情

上线一个阿里qiankun“微前端”，逼走了2位90后(代码片段)

????序言作为一个团队领导者，需要经常帮助组员解决各类阻塞问题。????????????而我一直从事后端的开发，导致对前端的知识储备并没有那么丰富（实际很简陋）。鉴于当下流行的开发模式几乎都是前后端分离的&#x... 查看详情

微前端：qiankun的五种通信方式(代码片段)

背景今天盘点一下qiankun父子应用的通信方式都有哪些，我发现了5种。1、localStorage/sessionStorage2、通过路由参数共享3、官方提供的props4、官方提供的actions5、使用vuex或redux管理状态，通过shared分享接下来我们一个一个进行... 查看详情

微前端架构-qiankun在vue3的应用(代码片段)

本文章介绍了qiankun在vue3的应用，其中子应用有vue2、vue3、react、angular介绍qiankun是一个基于single-spa的微前端实现库，旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统。其他几款（[single-spa]、[micro-app]... 查看详情

微前端——乾坤qiankundemo

...制了！从而解决了前端协同开发问题。文档地址：https://qiankun.umijs.org/zh2018年Single-SPA诞生了，single-spa是一个用于前端微服务化的JavaScript前端解决方案(本身没有处理样式隔离，js执行隔离)实现了路由劫持和应用加载。2019年qiankun... 查看详情

qiankun微前端应用实践与部署（四）

参考技术A一般情况下，我们对应用进行配置打包，要对图片字体等资源进行下面配置，使得资源路径正常加载。但是，在微前端模式下，子应用打包部署后，往往会出现子应用css文件里面引入资源路径加载失败的问题，下面就... 查看详情

qiankun+vue实现微前端架构(基于vue2实现)

参考技术A创建两个项目作为实现demo，一个为主应用，一个为子应用3.配置函数文件microAppSetting4.微应用出口文件index.js5.在App.vue内配置微应用容器及跳转菜单6.在main.js文件内引入微应用出口文件index.js7.运行后展示8.在配置完子应... 查看详情

qiankun微前端改造实战，超级详细vue代码干货篇！（伸手党福利）

作者：掘金干货君原文：https://juejin.cn/post/7096047543447978014众所周知，社区活跃最多的，就是非常爱好ctrl+c的伸手党。为了方便各位伸手党的大佬们直接拿走，特意做了两个代码仓库，一个主应用，一... 查看详情

qiankun微前端改造实战，超级详细vue代码干货篇！（伸手党福利）

作者：掘金干货君原文：https://juejin.cn/post/7096047543447978014众所周知，社区活跃最多的，就是非常爱好ctrl+c的伸手党。为了方便各位伸手党的大佬们直接拿走，特意做了两个代码仓库，一个主应用，一... 查看详情

3.2路由分发应用(代码片段)

1.微前端是什么微前端主要借鉴后端微服务的概念。简单地说，就是将一个巨无霸（Monolith）的前端工程拆分成一个一个的小工程。它们完全具备独立的开发、运行能力。整个系统就将由这些小工程协同合作，实现所有页面的展... 查看详情

qiankun子应用keep-alive实现方案

...、核心设计理念由于主应用微应用都能做到技术栈无关，qiankun对于用户而言只是一个类似jQuery的库，你需要调用几个qiankun的API即可完成应用的微前端改造。同时由于qiankun的HTMLentry及沙箱的设计，使得微应用的接入像使用iframe一... 查看详情