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

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

Настройка маршрутов

Маршруты в Riot.js определяются с использованием метода Riot.router.add. Каждый маршрут представляет собой строку пути, которая может включать статические сегменты и динамические параметры:

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

Riot.router.add('/user/:id', (params) => {
  console.log('Пользователь с ID:', params.id);
});
  • Статические маршруты: содержат фиксированные сегменты (/home, /about).
  • Динамические параметры: обозначаются через двоеточие (:id) и передаются в функцию-обработчик через объект params.

Использование нескольких параметров

Riot.js поддерживает маршруты с несколькими динамическими параметрами. Это позволяет строить гибкие URL-структуры для различных страниц приложения:

Riot.router.add('/product/:category/:id', (params) => {
  console.log(`Категория: ${params.category}, ID товара: ${params.id}`);
});

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

Обработка необязательных параметров

Необязательные параметры обозначаются с помощью знака вопроса ?. Это позволяет создавать маршруты с гибкой структурой, где некоторые сегменты могут отсутствовать:

Riot.router.add('/search/:query?', (params) => {
  if (params.query) {
    console.log('Поиск по запросу:', params.query);
  } else {
    console.log('Главная страница поиска');
  }
});

При отсутствии параметра объект params будет пустым или содержать undefined.

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

Переход между маршрутами осуществляется методом Riot.router.navigate. Этот метод обновляет URL и вызывает соответствующий обработчик:

Riot.router.navigate('/home');
Riot.router.navigate('/user/42');

Важной особенностью является возможность работы с историей браузера без перезагрузки страницы. Riot.js автоматически использует pushState для изменения адресной строки и управления историей.

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

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

Riot.router.add('/admin/*', (params, next) => {
  console.log('Проверка прав администратора');
  next(); // передать управление следующему маршруту
});

Riot.router.add('/admin/dashboard', () => {
  console.log('Панель администратора');
});

Звёздочка * используется для перехвата всех вложенных маршрутов. Это особенно полезно для реализации защиты страниц и выполнения общих операций перед переходом на конкретный маршрут.

Программная генерация URL

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

function userUrl(id) {
  return `/user/${id}`;
}

Riot.router.navigate(userUrl(123));

Это упрощает работу с навигацией и исключает ошибки при ручной подстановке параметров.

Реактивность маршрутов

Riot.js тесно интегрирован с реактивной системой фреймворка. Изменение маршрута автоматически обновляет связанные компоненты, если их состояние зависит от параметров URL:

Riot.router.add('/profile/:id', (params) => {
  riot.update({ userId: params.id });
});

Компоненты, подписанные на userId, будут автоматически перерендерены при переходе на новый профиль.

Встроенные методы работы с маршрутизатором

  • Riot.router.start() — запускает маршрутизатор и отслеживает изменения URL.
  • Riot.router.stop() — останавливает отслеживание изменений URL.
  • Riot.router.on('route', callback) — подписка на все изменения маршрутов.

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

Выводы по параметрам маршрутов

Параметры маршрутов в Riot.js являются ключевым механизмом для создания динамических интерфейсов. Они позволяют:

  • Извлекать данные из URL.
  • Строить гибкие структуры страниц.
  • Обеспечивать реактивное обновление компонентов.
  • Группировать и защищать маршруты.

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

Оглавление