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

微前端中的路由加载流程

news 2025/7/19 2:50:09

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);
});