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

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

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

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

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

1. 安装 qiankun
//npm install qiankun --save2. 主应用路由配置--配置一个路由映射表,这个表会将 URL 路径与子应用关联起来.
import { registerMicroApps, start } from 'qiankun';   
// 路由配置  
const apps = [  {  name: 'app1', // 应用名称  entry: '//localhost:8080', // 应用入口地址  container: '#app1', // 挂载的子应用容器  activeRule: '/app1', // 激活规则,当路由匹配到这个规则时,会加载这个子应用  },  {  name: 'app2',  entry: '//localhost:9090',  container: '#app2',  activeRule: '/app2',  },  // ... 其他子应用配置  
];  // 注册子应用  
registerMicroApps(apps);  // 启动 qiankun  
start();3. 子应用配置--在子应用中,你需要导出一些生命周期函数来配合 qiankun 的管理。
//子应用 main.js(或 index.js)
import React from 'react';  
import ReactDOM from 'react-dom';  
import App from './App';  // 生命周期函数 - bootstrap  
export async function bootstrap() {  console.log('app1 bootstraped');  
}  // 生命周期函数 - mount  
export async function mount(props) {  ReactDOM.render(<App />, props.container ? props.container.querySelector('#root') : document.getElementById('root'));  
}  // 生命周期函数 - unmount  
export async function unmount(props) {  ReactDOM.unmountComponentAtNode(props.container ? props.container.querySelector('#root') : document.getElementById('root'));  
}4. HTML 配置--在主应用和子应用的 HTML 文件中,你需要确保子应用能够正确地挂载到容器元素中。
//主应用 HTML
<!DOCTYPE html>  
<html lang="en">  
<head>  ...  
</head>  
<body>  <div id="app1"></div>  <div id="app2"></div>  ...  
</body>  
</html>//子应用 HTML
<!DOCTYPE html>  
<html lang="en">  
<head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>子应用 - App1</title>  <!-- 引入子应用的样式 -->  <link rel="stylesheet" href="app1.css">  
</head>  
<body>  <!-- 子应用的挂载点,这个元素将由主应用接管 -->  <div id="root"></div>  <!-- 引入子应用的 JavaScript 入口文件 -->  <script src="app1.js"></script>  <!-- 注意:这里通常不包含完整的 HTML 结构,如 <header>, <footer>-->  <!-- 这些全局元素和样式应该由主应用来管理 -->  
</body>  
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/838817.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【WEEK12】 【DAY3】整合MyBatis框架【中文版】

2024.5.15 Wednesday 目录 13.整合MyBatis框架13.1.整合测试13.1.1.新建springboot-05-mybatis项目13.1.2.导入MyBatis需要的依赖13.1.3.配置数据库连接信息13.1.3.1.修改application.properties13.1.3.2.修改Springboot05MybatisApplicationTests.java并测试 13.1.4.新建pojo文…

InnoDB 事务处理机制

文章目录 前言1. 事务处理挑战1.1 事务机制处理的问题1.2 并发事务带来的问题 2. InnodDB 和 ACID 模型2.1 Innodb Buffer Pool2.2 Redo log2.3 Undo log2.4 应用案例 3. 隔离级别和锁机制3.1 事务隔离级别3.1.1 READ UNCOMMITTED3.1.2 READ COMMITTED3.1.3 REPEATABLE READ3.1…

SpringBoot应用

文章目录 第一章、SpringBoot基础内容一、Spring和SpringBoot1、Spring介绍2、SpringBoot介绍 二、SpringBoot2入门操作1、在线构建2、idea构建 三、浅谈自动装配的原理 第二章、SpringBoot核心功能一、配置文件1、配置文件介绍2、语法规则3、数据类型4、案例使用 二、WEB开发1…

如何管理测试用例?测试用例有什么管理工具?YesDev

3.1 测试用例 测试用例(Test Case) 是指对一项特定的软件产品进行测试任务的描述&#xff0c;体现测试方案、方法、技术和策略。其内容包括测试目标、测试环境、输入数据、测试步骤、预期结果等。简单地认为&#xff0c;测试用例是为某个特殊目标而编制的一组测试输入、执行条…

CPT7数据保存详细步骤

一、连接设备、打开NovAtelConnect 软件 (1)点击1,并在2中输入如下命令: LOG RANGEB ONTIME 1 // 输出原始数据记录在板卡LOG RAWEPHEMB ONTIME 1 // 输出 GPS 原始星历记录在板卡LOG bdsephemerisb ONTIME 1 // 输出

在澳门写代码;技术入股2次融资被踢;现在只想做独立开发

本期我们邀请的程序员是Albert&#xff0c;先后在广州、澳门、珠海、香港工作过&#xff0c;打工上班、合伙创业、远程工作、独立开发&#xff0c;工作经历丰富&#xff0c;如果你想知道哪些程序员踩过的坑&#xff0c;请别错过他的故事。 广州&#xff1a;第一份工作2000块一…

C++ 结构体内存对齐

定义了两个结构体 typedef struct Cmd {uint8_t ua;uint8_t ub;uint8_t uc;uint32_t ue; } Cmd_t;typedef struct Cmd_tag {uint8_t value;uint8_t data[1]; // 将 data 定义为指向 Cmd_t 结构体的指针 } tag_t;在实际使用中&#xff0c;看见前人的代码是&#xff0c;new 一块内…

MySQL第三次作业--DML语句(INSERT)

目录 一、在数据库中创建一个表student&#xff0c;用于存储学生信息 二、向student表中添加一条新记录&#xff0c;记录中id字段的值为1&#xff0c;name字段的值为"monkey"&#xff0c;grade字段的值为98.5 三、向student表中添加多条新记录&#xff1a; 2,&qu…

详解动态规划之01背包问题及其空间压缩(图文并茂+例题讲解)

1. 动态规划问题的本质 记忆化地暴力搜索所有可能性来得到问题的解 我们常常会遇到一些问题&#xff0c;需要我们在n次操作&#xff0c;且每次操作有k种选择时&#xff0c;求出最终需要的最小或最大代价。处理类似的问题&#xff0c;我们一般需要遍历所有的可能性(相当于走一遍…

SpringMVC核心组件之HandlerMapping详解

文章目录 前言一、AbstractHandlerMapping抽象类initApplicationContextgetHandler 二、MatchableHandlerMapping类二、AbstractUrlHandlerMapping类 前言 当一个web请求到来时&#xff0c;DispatcherServlet负责接收请求并响应结果。DispatcherServlet首先需要找到当前请求对…

普通人也能创业!轻资产短视频带货项目,引领普通人实现创业梦想

在这个信息爆炸的时代&#xff0c;创业似乎成为了越来越多人的梦想。然而&#xff0c;传统的创业模式 keJ0277 往往伴随着高昂的资金投入和复杂的管理流程&#xff0c;让许多普通人望而却步。然而&#xff0c;现在有一种轻资产短视频带货项目正在悄然兴起&#xff0c;它以其低…

2024做安全测试必须要知道的几种方法!

前言 安全性测试(Security Testing)是指有关验证应用程序的安全等级和识别潜在安全性缺陷的过程&#xff0c;其主要目的是查找软件自身程序设计中存在的安全隐患&#xff0c;并检查应用程序对非法侵入的防范能力&#xff0c;安全指标不同&#xff0c;测试策略也不同。 但安全…

『Apisix安全篇』快速掌握APISIX Basic-Auth插件高效使用

&#x1f4e3;读完这篇文章里你能收获到 &#x1f468;‍&#x1f4bb; 学习如何快速安装并配置APISIX Basic-Auth插件&#xff0c;为您的API安全保驾护航。&#x1f6e0;️ 文章详细介绍了如何创建带有basic-auth配置的Consumer&#xff0c;以及如何在Route中启用该插件。&am…

微信自主创建表单投票小程序源码系统 带充值刷礼物功能 附带源代码以及完整的安装部署教程

系统概述 本小程序实现的核心功能包括&#xff1a;用户注册登录、表单提交投票、查看投票结果、在线充值以及赠送礼物等。其中&#xff0c;投票表单可以根据实际需求进行自定义设置&#xff0c;满足不同类型的调查或评选活动。同时&#xff0c;通过引入第三方支付接口&#xf…

Django Celery 的配置及使用---最详细教程

Django Celery 的配置及使用 Redis提供队列消息功能 一、安装redis 系统版本&#xff1a;Ubuntu 20.041、获取最新软件包 sudo apt update sudo apt install redis-server2、安装完成后&#xff0c;Redis服务器会自动启动。查看redis是否启动成功 sudo systemctl status …

LLM大模型多模态面试题(二)

1. 介绍transformer算法 Transformer本身是一个典型的encoder-decoder模型&#xff0c;Encoder端和Decoder端均有6个Block&#xff0c;Encoder端的Block包括两个模块&#xff0c;多头self-attention模块以及一个前馈神经网络模块&#xff1b;Decoder端的Block包括三个模块&…

uniapp 实现下拉刷新 下滑更新

效果图 在app或者小程序中向下滑动 会出现刷新数据 ,而上拉到底 需要更新数据 功能实现 主要俩种方式 依赖生命周期 在page.json中开启 page.json "style" : {"navigationBarTitleText" : "小小练习","backgroundTextStyle": &qu…

狙击策略专用术语以及含义,WeTrade3秒讲解

想必各位交易高手对狙击策略不会陌生吧!但你想必不知道狙击策略的开发者为了推广狙击策略&#xff0c;在狙击策略基础的经典技术分析理论引入了自己的术语。今天WeTrade众汇和各位投资者继续了解狙击策略专用术语以及含义。 一.BL 银行级别(BL)是前一日线收盘的级别。时间是格…

微信小程序开发中怎么配置SSL证书?

在微信小程序开发中&#xff0c;配置SSL证书主要用于实现HTTPS请求&#xff0c;以保证数据传输的安全性。以下是配置SSL证书的基本步骤&#xff1a; 一、获取SSL证书 首先&#xff0c;你需要获取一个有效的SSL证书。SSL证书可以被广泛信任的证书颁发机构申请&#xff0c;如Jo…

rocketmq的顺序消息开发注意事项

1. 参考消息重试&#xff0c;要对 MaxReconsumeTimes进行设置。之前就是因为没有进行设置&#xff0c;导致了队头阻塞问题。 rokcetmq和kafka一样&#xff0c;当顺序消息写入的多个队列中后&#xff0c;如果是顺序消息&#xff0c;当前的队列的队头一直消费失败的时候&#x…