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

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

Динамические сегменты маршрута

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

import { Router } from 'slim-js';

const router = new Router();

router.add('/users/:id', (params) => {
    console.log(params.id); // Выведет значение параметра id из URL
});
  • :id — динамический сегмент маршрута.
  • params — объект, содержащий все значения динамических сегментов.

Доступ к параметрам происходит через объект params, ключи которого соответствуют именам сегментов.

Необязательные параметры

Slim.js поддерживает необязательные параметры, которые указываются через знак вопроса ? после имени сегмента.

router.add('/products/:category/:item?', (params) => {
    console.log(params.category); // Обязательный сегмент
    console.log(params.item);     // Может быть undefined
});

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

Параметры с ограничениями

Для уточнения формата значения параметра можно использовать регулярные выражения. В Slim.js это реализуется через запись вида :paramName(regex).

router.add('/orders/:orderId(\\d+)', (params) => {
    console.log(params.orderId); // Только числовые значения
});

Регулярное выражение обеспечивает проверку данных еще на уровне роутинга, предотвращая обработку некорректных URL.

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

Для удобства управления маршрутами можно использовать группировку, объединяя пути с общими сегментами.

router.group('/admin', () => {
    router.add('/users/:id', (params) => {
        console.log('Admin user:', params.id);
    });
    router.add('/settings/:section?', (params) => {
        console.log('Admin section:', params.section);
    });
});

Группировка позволяет структурировать маршруты и повторно использовать базовые сегменты пути.

Вложенные параметры

Маршруты Slim.js поддерживают вложенные параметры, что особенно важно для построения сложных иерархий страниц.

router.add('/blog/:year/:month/:slug', (params) => {
    console.log(params.year, params.month, params.slug);
});

Каждый сегмент можно использовать для фильтрации данных или загрузки компонентов, соответствующих конкретной странице.

Передача параметров в компоненты

Параметры маршрутов могут передаваться в компоненты Slim.js напрямую для отображения динамического контента.

class UserProfile extends Slim {
    get useShadow() { return true; }
    onBeforeRender(params) {
        this.userId = params.id;
    }
    render() {
        return `<h1>Профиль пользователя: ${this.userId}</h1>`;
    }
}

router.add('/users/:id', (params) => {
    Slim.render(UserProfile, { params });
});
  • Метод onBeforeRender позволяет подготовить компонент к отображению с учетом полученных параметров.
  • Значения параметров доступны в шаблоне для динамического построения интерфейса.

Преобразование и валидация параметров

Slim.js предоставляет возможность предварительно преобразовывать и валидировать параметры перед их использованием.

router.add('/products/:id', (params) => {
    const productId = parseInt(params.id, 10);
    if (isNaN(productId)) {
        console.error('Некорректный ID продукта');
        return;
    }
    console.log('ID продукта:', productId);
});

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

Резюме ключевых возможностей

  • Динамические сегменты позволяют строить гибкие маршруты.
  • Необязательные параметры упрощают обработку различных вариантов URL.
  • Регулярные выражения обеспечивают контроль формата данных.
  • Группировка маршрутов повышает читаемость и структурированность кода.
  • Вложенные параметры помогают управлять сложными иерархиями страниц.
  • Передача параметров в компоненты позволяет интегрировать роутинг с интерфейсом.
  • Валидация и преобразование гарантируют корректность данных, поступающих через URL.

Понимание и правильное использование параметров маршрутов в Slim.js обеспечивает мощный инструмент для построения динамических и масштабируемых SPA-приложений.

Оглавление