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

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

Регистрация маршрутов по событию

Маршруты можно добавлять в любой момент с помощью функции page(path, callback). Пример динамической регистрации:

// Изначально приложение без маршрутов
page.start();

// Добавляем маршрут по событию
document.getElementById('loadProfileBtn').addEventListener('click', () => {
    page('/profile', (ctx) => {
        console.log('Маршрут профиля загружен');
        renderProfile(ctx.params.userId);
    });
});

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

Использование массива маршрутов

Для динамического добавления большого числа маршрутов удобно хранить их в массиве объектов и регистрировать циклом:

const routes = [
    { path: '/', handler: homePage },
    { path: '/about', handler: aboutPage },
    { path: '/contact', handler: contactPage }
];

routes.forEach(route => page(route.path, route.handler));
page();

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

Генерация маршрутов из данных

Часто маршруты зависят от данных, полученных с сервера. В этом случае можно регистрировать их после получения ответа:

fetch('/api/pages')
    .then(res => res.json())
    .then(pages => {
        pages.forEach(pageData => {
            page(`/page/${pageData.slug}`, (ctx) => {
                loadPageContent(pageData.id);
            });
        });
        page();
    });

Маршруты создаются автоматически на основе массива объектов с сервера. Это позволяет строить динамическую структуру сайта без ручного указания всех путей.

Встроенные функции для обновления маршрутов

Page.js предоставляет несколько инструментов для управления маршрутами:

  • page.show(path) — переход на маршрут программно. Можно использовать для динамически добавленных маршрутов.
  • page.redirect(from, to) — перенаправление с одного пути на другой, включая маршруты, добавленные динамически.
  • page('*', handler) — глобальный обработчик для всех маршрутов, включая вновь добавленные.

Пример использования глобального обработчика для логирования:

page('*', (ctx, next) => {
    console.log('Переход на маршрут:', ctx.path);
    next();
});

Удаление маршрутов

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

const registeredRoutes = [];

function addRoute(path, handler) {
    const wrappedHandler = (ctx, next) => handler(ctx, next);
    registeredRoutes.push({ path, handler: wrappedHandler });
    page(path, wrappedHandler);
}

// Для "удаления" маршрута можно пересоздать все маршруты заново без нужного
function removeRoute(pathToRemove) {
    page.stop();
    registeredRoutes
        .filter(r => r.path !== pathToRemove)
        .forEach(r => page(r.path, r.handler));
    page.start();
}

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

Ленивая загрузка обработчиков

Для минимизации начальной загрузки приложения обработчики маршрутов можно подгружать динамически с использованием import():

page('/dashboard', async (ctx) => {
    const module = await import('./dashboard.js');
    module.renderDashboard(ctx);
});

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

Применение динамических маршрутов в SPA

Ключевые сценарии:

  • Маршруты, зависящие от авторизации пользователя.
  • Разделение приложения на модули с отдельными маршрутами.
  • Подгрузка страниц или компонентов по мере их необходимости.
  • Создание кастомных страниц на основе данных с сервера без изменения основной структуры маршрутов.

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

Оглавление