微前端架构之路由管理（二）

最新推荐文章于 2024-08-05 22:43:05 发布

**之火

最新推荐文章于 2024-08-05 22:43:05 发布

阅读量170

点赞数 2

分类专栏：微前端框架文章标签：前端前端框架

本文链接：https://blog.csdn.net/qq_35876316/article/details/138942975

版权

微前端框架专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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

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

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

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

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

2. 主应用路由配置--配置一个路由映射表，这个表会将 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>