Настройка hash-режима

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

Инициализация Navigo с hash-режимом

Для создания экземпляра маршрутизатора с hash-режимом используется параметр useHash при инициализации:

import Navigo from 'navigo';

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

Пояснения к параметрам:

  • '/' — корневой путь приложения, от которого строятся маршруты.
  • { hash: true } — включает hash-режим. Все пути будут обрабатываться через фрагмент URL после #.

После этого переходы по маршрутам будут использовать формат:

http://example.com/#/about
http://example.com/#/contact

Добавление маршрутов

Маршруты добавляются стандартным способом с помощью метода on. Hash-режим не требует изменений в синтаксисе маршрутов:

router
  .on('/', () => {
    console.log('Главная страница');
  })
  .on('/about', () => {
    console.log('Страница "О нас"');
  })
  .on('/contact', () => {
    console.log('Контакты');
  });

В hash-режиме Navigo автоматически отслеживает изменения фрагмента URL и вызывает соответствующий обработчик.

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

Для программного перехода используется метод navigate:

router.navigate('/about');

В hash-режиме Navigo преобразует путь автоматически:

/about → #/about

Это позволяет строить SPA без необходимости перезагружать страницу.

Опции hash-режима

Hash-режим поддерживает несколько дополнительных настроек через объект options при инициализации:

const router = new Navigo(null, { hash: true, hashPrefix: '!' });
  • hashPrefix — добавляет префикс после #. Например, при hashPrefix: '!' URL будет выглядеть так:
http://example.com/#!/about

Использование префикса часто применяется для совместимости с SEO-движками и сторонними сканерами.

Обработка переходов и события update

Hash-режим позволяет отслеживать изменения URL без перезагрузки страницы через событие update:

router.updatePageLinks();

Метод updatePageLinks ищет все ссылки с атрибутом href и автоматически подключает их к маршрутизатору. Для hash-режима это особенно удобно, так как ссылки вида:

<a href="#/contact">Контакты</a>

будут корректно обрабатываться Navigo без дополнительного кода.

Преимущества hash-режима

  1. Совместимость с любым сервером — сервер не требует специальной настройки для обработки URL.
  2. Быстрая интеграция — маршрутизатор сразу работает без History API.
  3. Простота отладки — изменение фрагмента URL видно сразу в адресной строке.
  4. Защита от ошибок 404 — переход по любому hash-пути не вызывает ошибки на сервере.

Ограничения hash-режима

  • URL содержит #, что менее красиво для пользователей и SEO.
  • Невозможность полного управления историей браузера, как в режиме History.
  • Некоторые сторонние библиотеки могут некорректно обрабатывать hash-фрагменты.

Рекомендации по использованию

  • Использовать hash-режим для проектов, где нет возможности настроить сервер.
  • Для новых SPA рекомендуется рассматривать History API при условии корректной серверной конфигурации.
  • Для SEO-оптимизации можно комбинировать hashPrefix и серверные редиректы для старых ссылок.

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

Оглавление