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

Slim.js — это современная JavaScript-библиотека для создания веб-компонентов и построения SPA (Single Page Application). Одним из ключевых аспектов разработки с использованием Slim.js является маршрутизация, позволяющая управлять отображением различных компонентов в зависимости от URL.

Маршрутизация в Slim.js реализуется через объект Router, который связывает пути с компонентами или функциями, отвечающими за отображение контента.

Создание маршрутов

Маршрут определяется с помощью метода add, который принимает путь и обработчик:

import { Router } from 'slim-js';

const router = new Router();

router.add('/home', () => {
    console.log('Главная страница');
});

router.add('/about', () => {
    console.log('О странице');
});

В этом примере при переходе на /home или /about вызываются соответствующие функции. Обработчик может быть функцией, компонентом Slim.js или методом класса, что позволяет гибко управлять логикой отображения.

Параметры маршрутов

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

router.add('/user/:id', (params) => {
    console.log(`Пользователь с ID: ${params.id}`);
});

При переходе на /user/42 в консоль будет выведено Пользователь с ID: 42. Параметры маршрута передаются в обработчик автоматически и позволяют строить динамические страницы без дополнительных запросов.

Опциональные и регулярные параметры

Slim.js позволяет задавать опциональные сегменты и использовать регулярные выражения для валидации параметров:

router.add('/product/:id(\\d+)', (params) => {
    console.log(`Продукт с ID: ${params.id}`);
});

router.add('/search/:query?', (params) => {
    console.log(`Запрос поиска: ${params.query || 'нет'}`);
});
  • :id(\\d+) — параметр должен быть числом.
  • :query? — параметр опционален; если его нет, возвращается undefined.

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

Навигация между маршрутами

Для перехода между маршрутами используется метод navigate объекта Router:

router.navigate('/about');

Метод меняет URL и автоматически вызывает обработчик соответствующего маршрута. При этом страница не перезагружается, что критично для SPA.

Обработка “не найдено”

Для случаев, когда URL не соответствует ни одному маршруту, используется маршрут по умолчанию:

router.add('*', () => {
    console.log('Страница не найдена');
});

Символ * обозначает wildcard, который перехватывает все неизвестные пути. Это позволяет реализовать страницы 404 без дополнительных проверок.

Хэш-маршруты и History API

Slim.js поддерживает как классические хэш-маршруты, так и использование History API.

Пример с хэшем:

const router = new Router({ mode: 'hash' });

Пример с History API:

const router = new Router({ mode: 'history' });
  • mode: 'hash' — URL будет содержать # (например, /#/home).
  • mode: 'history' — используется чистый URL без хэша.

Выбор режима зависит от требований к серверной поддержке и SEO.

Группировка маршрутов

Slim.js позволяет объединять маршруты в группы для удобного управления и повторного использования префиксов:

router.group('/admin', () => {
    router.add('/dashboard', () => console.log('Панель администратора'));
    router.add('/users', () => console.log('Список пользователей'));
});

В этом случае маршруты /admin/dashboard и /admin/users будут корректно обрабатываться. Группировка упрощает организацию больших приложений.

Программная реакция на изменение маршрута

Для отслеживания переходов можно использовать событие onChange:

router.onChange((currentRoute) => {
    console.log(`Текущий маршрут: ${currentRoute.path}`);
});

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

Асинхронные маршруты

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

router.add('/posts/:id', async (params) => {
    const response = await fetch(`/api/posts/${params.id}`);
    const post = await response.json();
    console.log(post);
});

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

Поддержка вложенных маршрутов

Вложенные маршруты позволяют строить иерархию компонентов:

router.add('/dashboard', () => console.log('Dashboard'), [
    { path: '/settings', handler: () => console.log('Настройки') },
    { path: '/profile', handler: () => console.log('Профиль') },
]);

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

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

Оглавление