Переход на маршрут

Библиотека Navigo предоставляет лёгкий и гибкий способ управления маршрутами в одностраничных приложениях (SPA). Одним из ключевых аспектов работы с маршрутизатором является переход на маршрут, который позволяет программно изменять состояние URL и отображаемое содержимое без полной перезагрузки страницы.

Метод navigate()

Главный инструмент для перехода между маршрутами — метод navigate() объекта Navigo:

const router = new Navigo('/');
router.navigate('/about');

Ключевые моменты работы navigate():

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

Можно передавать опции вторым параметром:

router.navigate('/contact', { updateBrowserURL: true, callHandler: true });

Опции:

  • updateBrowserURL (по умолчанию true) — изменяет URL в адресной строке.
  • callHandler (по умолчанию true) — вызывает обработчик маршрута сразу после перехода.
  • replace (по умолчанию false) — заменяет текущую запись в истории вместо добавления новой.

Программный переход с параметрами

Navigo поддерживает маршруты с динамическими параметрами:

router.on('/user/:id', ({ data }) => {
  console.log('User ID:', data.id);
});

router.navigate('/user/42');
  • :id — параметр маршрута, который подставляется из строки URL.
  • В обработчике параметры доступны через объект data.

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

router.navigate('/search', { query: { q: 'Navigo', page: 2 } });
  • В URL это преобразуется в /search?q=Navigo&page=2.
  • Полезно для фильтров, поисковых запросов и пагинации.

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

В версиях Navigo 8+ маршруты можно именовать при регистрации:

router.on({ name: 'home', path: '/' });
router.on({ name: 'profile', path: '/profile/:userId' });

router.navigate({ name: 'profile', params: { userId: 101 } });

Преимущества:

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

Обновление URL без вызова обработчика

Иногда требуется изменить адресную строку, не вызывая обработчик:

router.navigate('/settings', { callHandler: false });
  • URL обновляется, но логика рендеринга не срабатывает.
  • Полезно при синхронизации состояния с адресной строкой или при использовании истории браузера.

История браузера и replace

Использование опции replace позволяет заменять текущий пункт истории, а не добавлять новый:

router.navigate('/login', { replace: true });
  • Применяется, например, после успешного логина, чтобы пользователь не мог вернуться на страницу входа через кнопку «назад».
  • Комбинируется с callHandler для немедленного вызова обработчика или с false, если нужно только обновить URL.

Переходы с якорями и query-параметрами

Navigo корректно обрабатывает якоря и query-параметры:

router.navigate('/docs#section2');
router.navigate('/search', { query: { term: 'javascript' } });
  • Якорь (#section2) сохраняется и прокручивается в документе после изменения URL.
  • Query-параметры сериализуются автоматически и могут использоваться внутри обработчиков маршрутов.

Асинхронные переходы и промисы

Метод navigate() может использоваться в асинхронных сценариях:

async function goToDashboard() {
  await someAsyncCheck();
  router.navigate('/dashboard');
}
  • Обеспечивает корректный переход только после завершения асинхронной логики, например, проверки прав доступа или загрузки данных.
  • Не блокирует интерфейс и сохраняет плавность SPA.

Интеграция с событиями браузера

Navigo автоматически синхронизирует состояние с историей браузера через popstate и hashchange. Однако программный переход через navigate():

  • Добавляет новый пункт в историю (если replace: false).
  • Позволяет корректно использовать кнопки «назад» и «вперед».
  • Можно комбинировать с updateBrowserURL: false для локальных переходов без изменения истории.

Практический пример комплексного перехода

router.on({
  '/home': () => renderHome(),
  '/profile/:userId': ({ data, query }) => renderProfile(data.userId, query),
  '/search': ({ query }) => renderSearch(query.q, query.page),
});

document.getElementById('searchBtn').addEventListener('click', () => {
  const query = { q: 'Navigo', page: 1 };
  router.navigate('/search', { query });
});

router.navigate('/home'); // начальная загрузка
  • Программные переходы интегрированы с динамическими параметрами, query-параметрами и событиями.
  • Обработчики маршрутов вызываются автоматически, обеспечивая мгновенный рендер компонентов без перезагрузки страницы.

Эти механизмы позволяют строить сложные SPA с полным контролем над URL, историей браузера и состоянием приложения, сохраняя лёгкость и гибкость, которую предоставляет Navigo.

Оглавление