Передача состояния

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

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

В Navigo маршруты могут содержать динамические параметры. Параметры определяются через двоеточие (:) в пути маршрута:

const router = new Navigo('/');

router.on('/user/:id', (params) => {
    console.log(params.id);
});
  • params — объект с ключами, соответствующими именам параметров.
  • Можно передавать несколько параметров одновременно:
router.on('/product/:category/:id', (params) => {
    console.log(params.category, params.id);
});

При переходе по URL /product/electronics/42 объект params будет выглядеть так: { category: 'electronics', id: '42' }.

Передача состояния через query-параметры

Navigo поддерживает передачу query-параметров через объект состояния при вызове метода navigate. Этот способ позволяет передавать дополнительную информацию, не изменяя путь маршрута.

router.navigate('/dashboard', { state: { userId: 123, theme: 'dark' } });

При этом можно получить состояние в обработчике маршрута через объект location:

router.on('/dashboard', (match) => {
    console.log(match.data.state.userId); // 123
    console.log(match.data.state.theme);  // 'dark'
});
  • match.data.state — содержит объект состояния, переданный при переходе.
  • Можно комбинировать с параметрами маршрута:
router.navigate('/user/42', { state: { from: 'homepage' } });

router.on('/user/:id', (match) => {
    console.log(match.params.id);         // '42'
    console.log(match.data.state.from);   // 'homepage'
});

Хранение состояния при программной навигации

Метод navigate позволяет передавать состояние при любом программном переходе:

router.navigate('/settings', { state: { lastVisited: '/dashboard' } });
  • Состояние сохраняется только в текущей сессии навигации, не изменяя URL.
  • Можно использовать для передачи информации о предыдущем маршруте, фильтрах или временных данных.

Доступ к состоянию при событии on и resolve

Navigo предоставляет объект match, который содержит:

  • match.url — текущий путь.
  • match.params — параметры маршрута.
  • match.data.state — состояние, переданное через navigate.

Пример:

router.on('/profile/:userId', (match) => {
    const { userId } = match.params;
    const previousPage = match.data.state?.from || 'unknown';
    console.log(`Пользователь ${userId}, пришёл с ${previousPage}`);
});

Метод resolve() позволяет обработать состояние при загрузке страницы или ручном вызове:

router.resolve('/profile/42', { state: { from: 'login' } });

Состояние и история браузера

Navigo интегрируется с history API. При передаче состояния через navigate:

  • Состояние сохраняется в объекте истории браузера (history.state).
  • Переходы с кнопками “назад” и “вперед” корректно восстанавливают состояние:
router.on('/cart', (match) => {
    console.log(match.data.state?.selectedItems);
});

router.navigate('/cart', { state: { selectedItems: [101, 102, 103] } });

При возврате на предыдущий маршрут match.data.state содержит правильные данные.

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

  1. Состояние не отображается в URL — для передачи данных между страницами без перезагрузки оно работает, но при обновлении страницы без resolve данные будут потеряны.
  2. Размер объекта — слишком большие объекты состояния могут замедлить работу навигации.
  3. Сложные структуры — вложенные объекты и функции не всегда корректно сохраняются в history.state.

Резюме основных техник

  • Динамические параметры маршрута: :param → match.params.param.
  • Состояние через navigate: { state: {...} } → match.data.state.
  • Совмещение параметров и состояния: позволяет гибко управлять данными между маршрутами.
  • Использование resolve: восстановление состояния при загрузке или ручном вызове маршрута.
  • История браузера: состояние синхронизируется с history.state для корректной навигации назад/вперёд.

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

Оглавление