路由管理是一个核心部分,它负责处理多个子应用(也称为微前端)之间的页面跳转和导航。在微前端架构中,由于存在多个独立的子应用,因此需要一个全局的路由管理器来协调这些子应用的路由。
路由管理通常涉及以下几个方面:
- 全局路由表:维护一个全局的路由表,记录每个子应用的路由信息,包括路径、子应用名称、加载方式等。
- 路由监听:监听浏览器地址栏的变化,根据地址栏中的路径信息,找到对应的子应用并进行加载。
- 子应用路由隔离:每个子应用都有自己的路由系统,但在微前端架构中,需要确保子应用之间的路由不会相互干扰。这通常通过一些技术手段来实现,如使用基座应用的路由系统来统一处理路由,或者通过子应用内部的路由系统来实现隔离。
- 路由通信:在多个子应用之间,可能需要通过路由来传递信息或触发事件。因此,路由管理器需要支持跨子应用的路由通信。
基于 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>