微前端架构 之 路由管理(二)

路由管理是一个核心部分,它负责处理多个子应用(也称为微前端)之间的页面跳转和导航。在微前端架构中,由于存在多个独立的子应用,因此需要一个全局的路由管理器来协调这些子应用的路由。

路由管理

中心化路由管理:

在主应用中维护全局路由表,并将微应用的路由信息整合到全局路由表中。这样可以避免不同微应用的路由冲突,并使得路由的维护和管理更为方便。

动态路由管理:

微应用各自维护自己的路由逻辑,并向主应用暴露自己的路由菜单数据。主应用在运行时动态获取微应用的数据来生成自己的路由菜单,实现微应用和主应用的完全解耦。

混合式路由管理:

结合中心化路由管理和动态路由管理,主应用维护全局的路由表和菜单,微应用则维护自身的路由表和菜单。微应用的路由表和菜单信息会被主应用动态获取和整合。

路由监听和劫持:

使用single-spa时,主应用会监听hashchange和popstate事件,并重写window.addEventListener和window.removeEventListener方法,劫持这些事件,确保在路由变化时能够触发微应用的状态变化。

使用single-spa的reroute函数:

reroute是single-spa的核心方法,它更新微应用的状态,触发微应用的生命周期函数,并发出一系列自定义事件。这个函数在路由变化时自动触发,是single-spa路由管理的关键。

路由管理通常涉及以下几个方面:

  1. 全局路由表:维护一个全局的路由表,记录每个子应用的路由信息,包括路径、子应用名称、加载方式等。
  2. 路由监听:监听浏览器地址栏的变化,根据地址栏中的路径信息,找到对应的子应用并进行加载。
  3. 子应用路由隔离:每个子应用都有自己的路由系统,但在微前端架构中,需要确保子应用之间的路由不会相互干扰。这通常通过一些技术手段来实现,如使用基座应用的路由系统来统一处理路由,或者通过子应用内部的路由系统来实现隔离。
  4. 路由通信:在多个子应用之间,可能需要通过路由来传递信息或触发事件。因此,路由管理器需要支持跨子应用的路由通信。

基于 qiankun 框架的路由管理代码栗子:

1. 安装 qiankun
//npm install qiankun --save

2. 主应用路由配置--配置一个路由映射表,这个表会将 URL 路径与子应用关联起来.
import {
    registerMicroApps, start } from 'qiankun';   
// 路由配置  
const apps = [  
  {
     
    name: 'app1', // 应用名称  
    entry: '//localhost:8080'
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

**之火

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

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

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

打赏作者

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

抵扣说明:

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

余额充值