Hash-роутинг

Hash-роутинг — это способ организации навигации в одностраничных приложениях (SPA) с использованием символа # в URL. В отличие от History API, hash-роутинг не требует серверной настройки для обработки маршрутов, так как всё после # не отправляется на сервер. В библиотеке Navigo это реализуется автоматически при включении соответствующего режима.

import Navigo from 'navigo';

const router = new Navigo('/', { hash: true });

В данном примере hash: true активирует hash-режим. Теперь все маршруты будут обрабатываться через часть URL после #. Например, путь /about будет отображаться в браузере как http://example.com/#/about.

Регистрация маршрутов

Маршруты в Navigo объявляются с помощью метода on(). В hash-режиме маршруты указываются точно так же, как в обычном режиме.

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

router.on('/about', () => {
  console.log('О нас');
});

При переходе по http://example.com/#/home сработает обработчик для /home.

Поддержка параметров

Hash-роутинг в Navigo полностью поддерживает динамические сегменты и параметры.

router.on('/user/:id', (params) => {
  console.log('ID пользователя:', params.id);
});

Переход по http://example.com/#/user/42 выведет в консоль ID пользователя: 42.

Метод navigate

Метод navigate() используется для программной навигации между маршрутами. В hash-режиме он автоматически обновляет часть URL после #.

router.navigate('/about');

После вызова браузер покажет http://example.com/#/about, а соответствующий обработчик маршрута выполнится.

  • Важно: navigate корректно работает с параметрами.
router.navigate('/user/99');

URL обновится на http://example.com/#/user/99.

Обработка “не найдено”

Для маршрутов, которых нет в объявленных обработчиках, используется метод notFound():

router.notFound(() => {
  console.log('Страница не найдена');
});

При переходе на http://example.com/#/unknown сработает обработчик notFound.

Поддержка регулярных выражений

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

router.on('/product/:id(\\d+)', (params) => {
  console.log('ID продукта:', params.id);
});

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

Префикс для hash

По умолчанию Navigo использует символ # перед маршрутом. При необходимости можно задать кастомный префикс:

const router = new Navigo('/', { hash: true, hashPrefix: '!' });

Теперь URL будут иметь вид: http://example.com/#!/about.

Преимущества hash-роутинга

  1. Совместимость со старыми браузерами — не требуется History API.
  2. Простота развертывания — серверу не нужно знать о маршрутах SPA.
  3. Мгновенная навигация — изменения URL происходят без перезагрузки страницы.

Обновление текущего маршрута

Метод updatePageLinks() позволяет обновить все внутренние ссылки <a> с атрибутом href, чтобы они корректно работали с Navigo в hash-режиме:

router.updatePageLinks();

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

Примеры комбинации маршрутов и хэш-ссылок

<a href="#/home">Главная</a>
<a href="#/about">О нас</a>
<a href="#/user/1">Профиль</a>

При нажатии на любую из ссылок Navigo перехватит переход и выполнит соответствующий обработчик без перезагрузки страницы.

Особенности работы с hash-роутингом

  • Hash-роутинг не требует настройки сервера.
  • Все маршруты находятся после символа #.
  • Параметры маршрута доступны через объект params в обработчике.
  • Можно использовать регулярные выражения и динамические сегменты.
  • Метод navigate() корректно обновляет hash и вызывает обработчик.

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

Оглавление