当前位置: 首页 > news >正文

微前端中的路由加载流程

1. 初始化基座应用

基座应用:基座应用是微前端架构中的主应用,负责管理和协调各个子应用的加载和卸载。
初始化:基座应用在启动时会初始化路由配置,注册各个子应用的路由。

2. 注册子应用

子应用需要向基座应用注册自己的路由和入口点。这通常通过一个配置文件或注册函数来实现。

// 基座应用中的注册函数
registerMicroApp('app1', {entry: '//localhost:3001',container: '#subapp-container',activeRule: '/app1'
});registerMicroApp('app2', {entry: '//localhost:3002',container: '#subapp-container',activeRule: '/app2'
});

3. 路由匹配

当用户访问某个 URL 时,基座应用会根据路由配置匹配相应的子应用。

// 基座应用中的路由匹配
const router = new Router();
router.addRoute('/app1', () => loadApp('app1'));
router.addRoute('/app2', () => loadApp('app2'));
router.start();

4. 加载子应用

基座应用根据匹配的路由动态加载对应的子应用。

function loadApp(name) {return import(`@/apps/${name}`).then((app) => {app.bootstrap(); // 子应用的启动方法});
}

5. 渲染子应用

子应用加载完成后,基座应用会将子应用渲染到指定的容器中。

// 子应用的启动方法
export function bootstrap() {render(<App />, document.getElementById('subapp-container'));
}

6. 路由切换

当用户导航到不同的路由时,基座应用会卸载当前子应用,并加载新的子应用。

function switchRoute(path) {const currentApp = getCurrentApp();if (currentApp) {currentApp.unmount(); // 卸载当前子应用}const nextApp = getAppByPath(path);if (nextApp) {loadApp(nextApp.name); // 加载新的子应用}
}

7. 生命周期管理

子应用通常会提供一些生命周期方法,如 bootstrap、mount、unmount 等,用于管理子应用的加载、渲染和卸载过程。

// 子应用的生命周期方法
export function bootstrap() {console.log('app1 bootstrap');
}export function mount(props) {render(<App />, props.container);
}export function unmount() {unmountComponentAtNode(document.getElementById('subapp-container'));
}

8. 状态管理

在微前端架构中,子应用之间可能需要共享状态。基座应用可以提供一个全局的状态管理机制,如 Redux、MobX 等。

// 基座应用中的状态管理
const store = createStore(reducer);// 子应用中获取全局状态
function getGlobalState() {return store.getState();
}

9. 通信机制

子应用之间或子应用与基座应用之间可能需要进行通信。可以通过事件总线、全局对象等方式实现。

// 基座应用中的事件总线
const eventBus = new EventEmitter();// 子应用中发送事件
eventBus.emit('event-name', data);// 子应用中监听事件
eventBus.on('event-name', (data) => {console.log(data);
});

相关文章:

微前端中的路由加载流程

1. 初始化基座应用 基座应用&#xff1a;基座应用是微前端架构中的主应用&#xff0c;负责管理和协调各个子应用的加载和卸载。 初始化&#xff1a;基座应用在启动时会初始化路由配置&#xff0c;注册各个子应用的路由。 2. 注册子应用 子应用需要向基座应用注册自己的路由和…...

Axure大屏可视化模板:跨领域数据分析平台原型案例

随着信息技术的飞速发展&#xff0c;数据可视化已成为各行各业提升管理效率、优化决策过程的重要手段。Axure作为一款强大的原型设计工具&#xff0c;其大屏可视化模板在农业、园区、城市、企业数据可视化、医疗等多个领域得到了广泛应用。本文将通过几个具体案例&#xff0c;展…...

机器学习(1)——线性回归、线性分类与梯度下降

文章目录 线性回归线性分类线性可分数据线性不可分数据逻辑回归支持向量机 梯度下降批量梯度下降随机梯度下降批量随机梯度下降 线性回归 概述&#xff1a; 在一元线性回归中&#xff0c;我们假设目标变量y与特征变量x存在线性关系&#xff0c;模型表达式为&#xff1a; y …...

完整的端到端的中文聊天机器人

这段代码是一个完整的端到端的中文聊天机器人的实现,包括数据处理、模型训练、预测和图形用户界面(GUI),下面是对各个部分功能的详细说明: 1. 导入必要的库 import os os.environ[CUDA_LAUNCH_BLOCKING] = 1import torch import torch.nn as nn import torch.optim as o…...

【有啥问啥】Stackelberg博弈方法:概念、原理及其在AI中的应用

Stackelberg博弈方法&#xff1a;概念、原理及其在AI中的应用 1. 什么是Stackelberg博弈&#xff1f; Stackelberg博弈&#xff08;Stackelberg Competition&#xff09;是一种不对称的领导者-追随者&#xff08;Leader-Follower&#xff09;博弈模型&#xff0c;由德国经济学…...

【UI自动化】前言

系列文章目录 【UI自动化】前言 自动化不能代替手工测试&#xff0c;自动化都是以手工测试为基础&#xff0c;自动化测试实现的步骤要依赖手工&#xff1b; 文章目录 系列文章目录【UI自动化】前言 自动化测试的类型自动化解决的问题什么是UI测试测试分类一、使用UI自动化的…...

Unity对象池的高级写法 (Plus优化版)

唐老师关于对物体分类的OOD的写法确实十分好&#xff0c;代码也耦合度也低&#xff0c;但是我有个简单的写法同样能实现一样的效果&#xff0c;所以我就充分发挥了一下主观能动性 相较于基本功能&#xff0c;这一版做出了如下改动 1.限制了对象池最大数量&#xff0c;多出来的…...

vue3<script setup>中computed

在 Vue 3 中&#xff0c;<script setup> 语法糖是 Composition API 的一种简化写法&#xff0c;它允许你更简洁地编写组件逻辑。在 <script setup> 中使用 computed 与在普通 <script> 标签中使用 Composition API 的方式类似&#xff0c;但通常我们会借助 i…...

【已解决】使用JAVA语言实现递归调用-本关任务:用循环和递归算法求 n(小于 10 的正整数) 的阶乘 n!。

本关任务&#xff1a;用循环和递归算法求 n&#xff08;小于 10 的正整数&#xff09; 的阶乘 n!。 测试说明 平台会对你编写的代码进行测试&#xff0c;比对你输出的数值与实际正确数值&#xff0c;只有所有数据全部计算正确才能通过测试&#xff1a; 测试输入&#xff1a;1…...

BiRefNet 教程:基于 PyTorch 实现的双向精细化网络

BiRefNet 教程&#xff1a;基于 PyTorch 实现的双向精细化网络 BiRefNet 是一个图像分割网络&#xff0c;专注于复杂任务如背景移除、掩码生成、伪装物体检测、显著性目标检测等。该模型结合了编码器、解码器、多尺度特征提取、以及梯度监督机制&#xff0c;能够有效处理不同类…...

Oracle 数据库安装和配置指南(新)

目录 1. 什么是Oracle数据库&#xff1f; 2. 安装前的准备工作 2.1 硬件要求 2.2 软件要求 2.3 下载Oracle安装包 3. Oracle数据库的安装步骤 3.1 Windows系统安装步骤 3.2 Linux系统安装步骤 4. 配置Oracle数据库 4.1 设置环境变量&#xff08;Linux&#xff09; 4.…...

JavaScript的注释与常见输出方式

注释 源码中注释是不被引擎所解释的&#xff0c;它的作用是对代码进行解释。Javascript 提供两种注释的写法:一种是单行注释&#xff0c;用//起头;另一种是多行注释&#xff0c;放在/*和*/之间。 单行注释&#xff1a; //这是单行注释 多行注释&#xff1a; /*这是 多行 注…...

深入探索Android开发之Java核心技术学习大全

Android作为全球最流行的移动操作系统之一&#xff0c;其开发技能的需求日益增长。本文将为您介绍一套专为Android开发者设计的Java核心技术学习资料&#xff0c;包括详细的学习大纲、PDF文档、源代码以及配套视频教程&#xff0c;帮助您从Java基础到高级特性&#xff0c;再到A…...

vue3 选择字体的颜色,使用vue3-colorpicker来选择颜色

1、有的时候我们会用到颜色的选择器&#xff0c;像element-plus提供了&#xff0c;但是ant-design-vue并没有&#xff1a; 这个暂时没有看到&#xff1a; 但是Ant Design 5的版本有&#xff0c;应该不是vue的。 2、使用第三方提供的vue3-colorpicker&#xff1a;storybook/cli…...

windows C++ 并行编程-使用消息块筛选器

本文档演示了如何使用筛选器函数&#xff0c;使异步消息块能够根据消息的有效负载接受或拒绝消息。 创建消息块对象(例如 concurrency::unbounded_buffer、concurrency::call 或 concurrency::transformer)时&#xff0c;可以提供筛选器函数&#xff0c;用于确定消息块是接受还…...

【mysql技术内幕】

MySQL之技术内幕 1.MVCC模式2. 实现mvcc模式的基础点3.MySQL锁的类型4. 说下MySQL的索引有哪些吧&#xff1f;5. 谈谈分库分表6. 分表后的id咋么保证唯一性呢&#xff1f;7. 分表后非sharding key的查询咋么处理的&#xff1f; 1.MVCC模式 MVCC, 是multi-version concurrency c…...

快递物流单号识别API接口DEMO下载

单号识别API为用户提供单号识别快递公司服务&#xff0c;依托于快递鸟大数据平台&#xff0c;用户提供快递单号&#xff0c;即可实时返回可能的一个或多个快递公司&#xff0c;存在多个快递公司结果的&#xff0c;大数据平台根据可能性、单号量&#xff0c;进行智能排序。 应用…...

Jetpack——Room

概述 Room是谷歌公司推出的数据库处理框架&#xff0c;该框架同样基于SQLite&#xff0c;但它通过注解技术极大简化了数据库操作&#xff0c;减少了原来相当一部分编码工作量。在使用Room之前&#xff0c;要先修改模块的build.gradle文件&#xff0c;往dependencies节点添加下…...

Dynamic Connected Networks for Chinese Spelling Check(ACL2021)

Dynamic Connected Networks for Chinese Spelling Check(ACL2021) 一&#xff0e;概述 文中认为基于bert的非自回归语言模型依赖于输出独立性假设。不适当的独立性假设阻碍了基于bert的模型学习目标token之间的依赖关系&#xff0c;从而导致了不连贯的问题。为些&#xff0c…...

前端vue-3种生命周期,只能在各自的领域使用

上面的表格可以简化为下面的两句话&#xff1a; setup是语法糖&#xff0c;下面的两个import导入是vue3和vue2的区别&#xff0c;现在的vue3直接导入&#xff0c;比之前vue2简单 还可以是导入两个生命周期函数...

docker详细操作--未完待续

docker介绍 docker官网: Docker&#xff1a;加速容器应用程序开发 harbor官网&#xff1a;Harbor - Harbor 中文 使用docker加速器: Docker镜像极速下载服务 - 毫秒镜像 是什么 Docker 是一种开源的容器化平台&#xff0c;用于将应用程序及其依赖项&#xff08;如库、运行时环…...

React Native 导航系统实战(React Navigation)

导航系统实战&#xff08;React Navigation&#xff09; React Navigation 是 React Native 应用中最常用的导航库之一&#xff0c;它提供了多种导航模式&#xff0c;如堆栈导航&#xff08;Stack Navigator&#xff09;、标签导航&#xff08;Tab Navigator&#xff09;和抽屉…...

3.3.1_1 检错编码(奇偶校验码)

从这节课开始&#xff0c;我们会探讨数据链路层的差错控制功能&#xff0c;差错控制功能的主要目标是要发现并且解决一个帧内部的位错误&#xff0c;我们需要使用特殊的编码技术去发现帧内部的位错误&#xff0c;当我们发现位错误之后&#xff0c;通常来说有两种解决方案。第一…...

IGP(Interior Gateway Protocol,内部网关协议)

IGP&#xff08;Interior Gateway Protocol&#xff0c;内部网关协议&#xff09; 是一种用于在一个自治系统&#xff08;AS&#xff09;内部传递路由信息的路由协议&#xff0c;主要用于在一个组织或机构的内部网络中决定数据包的最佳路径。与用于自治系统之间通信的 EGP&…...

376. Wiggle Subsequence

376. Wiggle Subsequence 代码 class Solution { public:int wiggleMaxLength(vector<int>& nums) {int n nums.size();int res 1;int prediff 0;int curdiff 0;for(int i 0;i < n-1;i){curdiff nums[i1] - nums[i];if( (prediff > 0 && curdif…...

ESP32 I2S音频总线学习笔记(四): INMP441采集音频并实时播放

简介 前面两期文章我们介绍了I2S的读取和写入&#xff0c;一个是通过INMP441麦克风模块采集音频&#xff0c;一个是通过PCM5102A模块播放音频&#xff0c;那如果我们将两者结合起来&#xff0c;将麦克风采集到的音频通过PCM5102A播放&#xff0c;是不是就可以做一个扩音器了呢…...

数据链路层的主要功能是什么

数据链路层&#xff08;OSI模型第2层&#xff09;的核心功能是在相邻网络节点&#xff08;如交换机、主机&#xff09;间提供可靠的数据帧传输服务&#xff0c;主要职责包括&#xff1a; &#x1f511; 核心功能详解&#xff1a; 帧封装与解封装 封装&#xff1a; 将网络层下发…...

Axios请求超时重发机制

Axios 超时重新请求实现方案 在 Axios 中实现超时重新请求可以通过以下几种方式&#xff1a; 1. 使用拦截器实现自动重试 import axios from axios;// 创建axios实例 const instance axios.create();// 设置超时时间 instance.defaults.timeout 5000;// 最大重试次数 cons…...

USB Over IP专用硬件的5个特点

USB over IP技术通过将USB协议数据封装在标准TCP/IP网络数据包中&#xff0c;从根本上改变了USB连接。这允许客户端通过局域网或广域网远程访问和控制物理连接到服务器的USB设备&#xff08;如专用硬件设备&#xff09;&#xff0c;从而消除了直接物理连接的需要。USB over IP的…...

vulnyx Blogger writeup

信息收集 arp-scan nmap 获取userFlag 上web看看 一个默认的页面&#xff0c;gobuster扫一下目录 可以看到扫出的目录中得到了一个有价值的目录/wordpress&#xff0c;说明目标所使用的cms是wordpress&#xff0c;访问http://192.168.43.213/wordpress/然后查看源码能看到 这…...