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

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

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

Параметры маршрутов в SkateJS задаются через двоеточие (:) перед именем переменной в строке пути. Пример базового маршрута с параметром:

import { Router } from '@skatejs/router';

const router = new Router();

router.route('/user/:id', ({ params }) => {
    console.log(params.id); // Доступ к значению параметра
});

В этом примере любой URL вида /user/123 будет сопоставлен с маршрутом, а params.id примет значение "123".

Особенности синтаксиса:

  • Параметры всегда идут после слеша (/), могут быть любыми строками без разделителей.
  • SkateJS поддерживает несколько параметров в одном маршруте: /user/:id/post/:postId.
  • Если параметр не указан в URL, его значение будет undefined.

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

Параметры можно сделать необязательными, добавив знак вопроса ? после имени параметра:

router.route('/search/:query?', ({ params }) => {
    console.log(params.query); // Может быть undefined
});

Такой маршрут будет работать как для /search, так и для /search/keyword.

Параметры с дефолтными значениями

SkateJS не предоставляет встроенного синтаксиса для дефолтных значений параметров. Для этого используется проверка в обработчике маршрута:

router.route('/profile/:tab?', ({ params }) => {
    const tab = params.tab || 'overview';
    console.log(tab); // Если tab не указан, используется 'overview'
});

Массовое извлечение параметров

Для маршрутов с несколькими параметрами удобно использовать деструктуризацию:

router.route('/shop/:category/:productId', ({ params }) => {
    const { category, productId } = params;
    console.log(category, productId);
});

Это упрощает передачу данных в компоненты и обработку логики.

Валидация параметров

Для валидации параметров SkateJS рекомендует использовать регулярные выражения. Синтаксис позволяет указать шаблон для параметра:

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

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

Параметры и query string

Отдельно от параметров маршрута в SkateJS можно работать с query-параметрами через объект location.search:

router.route('/products/:id', ({ params, location }) => {
    const urlParams = new URLSearchParams(location.search);
    const ref = urlParams.get('ref');
    console.log(params.id, ref);
});

Таким образом, URL /products/42?ref=homepage даст params.id = "42" и ref = "homepage".

Динамическое обновление параметров

SkateJS позволяет динамически обновлять параметры без перезагрузки страницы с помощью метода navigate:

router.navigate('/user/456');

Это изменяет текущий маршрут, обновляет параметры и вызывает соответствующий обработчик. При необходимости можно объединять это с состоянием компонентов, чтобы реактивно менять отображение:

class UserProfile extends HTMLElement {
    connectedCallback() {
        this.routerSubscription = router.onRoute(({ params }) => {
            this.renderUser(params.id);
        });
    }
    disconnectedCallback() {
        this.routerSubscription();
    }
    renderUser(id) {
        this.innerHTML = `<p>Пользователь: ${id}</p>`;
    }
}
customElements.define('user-profile', UserProfile);

Ограничения и особенности

  • Параметры маршрута не могут содержать слэши (/). Для вложенных структур следует использовать несколько сегментов пути.
  • SkateJS не поддерживает “глубокие” параметры вида /user/:id/details/:subId? без явного объявления каждого сегмента.
  • Изменение параметра через navigate автоматически вызывает обработчик маршрута, что исключает необходимость ручного обновления состояния.

Советы по организации параметров

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

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

Оглавление