Routing в микрофронтендах

Маршрутизация — ключевой компонент современного фронтенда, позволяющий организовать навигацию между различными частями приложения. В контексте микрофронтендов она приобретает особую важность, так как каждый микрофронтенд может иметь собственный набор маршрутов, при этом все они должны корректно взаимодействовать в едином хост-приложении.

Использование Vue Router

Vue Router является официальным инструментом маршрутизации для Vue.js. Для работы с микрофронтендами важно учитывать, что маршруты могут загружаться динамически и разделяться между отдельными микрофронтенд-приложениями. Типичная конфигурация включает:

import { createRouter, createWebHistory } from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

Ключевые моменты:

  • createWebHistory обеспечивает работу маршрутизатора через History API браузера, что позволяет использовать красивые URL без хешей (#).
  • Каждое приложение может иметь свой отдельный роутер, что важно при интеграции нескольких микрофронтендов.

Динамическая загрузка маршрутов

В микрофронтендах часто требуется, чтобы маршруты подгружались по мере необходимости. Это снижает начальный вес приложения и повышает производительность.

const routes = [
  {
    path: '/dashboard',
    component: () => import('./components/Dashboard.vue')
  },
  {
    path: '/settings',
    component: () => import('./components/Settings.vue')
  }
];

Использование ленивой загрузки (lazy loading) компонентов позволяет разделять код и минимизировать время первой загрузки.

Интеграция с хост-приложением

При использовании микрофронтендов необходимо учитывать, что маршруты отдельных приложений могут пересекаться. Решение — namespace или префикс для маршрутов:

const routes = [
  { path: '/app1/home', component: App1Home },
  { path: '/app2/home', component: App2Home },
];

Хост-приложение может также предоставлять глобальный роутер, в который подгружаются маршруты всех микрофронтендов через API регистрации:

hostRouter.addRoute('/app1', app1Router.options.routes);
hostRouter.addRoute('/app2', app2Router.options.routes);

Навигация между микрофронтендами

Для корректной навигации важно использовать методы Vue Router:

  • router.push({ path: '/app2/home' }) — программная навигация.
  • router.replace({ path: '/app2/home' }) — замена текущего маршрута без добавления записи в историю.
  • <router-link> — компонент для декларативной навигации через шаблон.

Состояние и маршруты

Vue Router тесно интегрируется с глобальным состоянием приложения, особенно если используется Vuex или Pinia. Каждый микрофронтенд может хранить состояние маршрутизации локально и синхронизировать его с глобальным состоянием через события или общий store:

watch(() => router.currentRoute.value.path, (newPath) => {
  store.commit('updateRoute', newPath);
});

Обработка ошибок маршрутизации

В микрофронтендах критично корректно обрабатывать недоступные маршруты и ошибки загрузки компонентов:

router.onError((error) => {
  console.error('Ошибка маршрутизации:', error);
});

Для пользовательского интерфейса можно использовать fallback-компоненты или страницы 404.

Хэш-маршрутизация для независимых микрофронтендов

Если микрофронтенды развёртываются на отдельных серверах или имеют ограниченный доступ к History API, используется хэш-маршрутизация:

import { createRouter, createWebHashHistory } from 'vue-router';
const router = createRouter({
  history: createWebHashHistory(),
  routes,
});

Этот подход предотвращает конфликты при обновлении страниц и позволяет запускать микрофронтенды независимо друг от друга.

Подведение итогов архитектуры

В микрофронтенд-архитектуре маршрутизация должна быть модульной, изолированной и легко интегрируемой с другими приложениями. Использование Vue Router с динамической загрузкой маршрутов, префиксами, синхронизацией состояния и обработкой ошибок позволяет создавать масштабируемые и управляемые системы.

Такой подход обеспечивает согласованную навигацию, минимизирует конфликты и улучшает пользовательский опыт в сложных фронтенд-проектах с множеством независимых приложений.

Оглавление