Методы экземпляра

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

on(path, handler, [name])

Метод on регистрирует маршруты и сопоставляет их с функциями-обработчиками.

Синтаксис:

router.on(path, handler, name);

Параметры:

  • path — строка маршрута (например, /home), массив маршрутов (['/home', '/about']) или регулярное выражение.
  • handler — функция, которая вызывается при совпадении маршрута. Получает объект с параметрами (params) и другими свойствами.
  • name (опционально) — имя маршрута для последующего использования в generate.

Пример использования:

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

Поддерживаются динамические сегменты (:id) и необязательные сегменты (:id?).

Метод позволяет программно изменить URL без перезагрузки страницы и инициировать обработку маршрута.

Синтаксис:

router.navigate(path, options);

Параметры:

  • path — путь для навигации (например, /about).

  • options (опционально) — объект с параметрами:

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

Пример использования:

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

resolve()

Метод инициирует проверку текущего URL и вызывает соответствующий обработчик. Особенно полезен после асинхронной загрузки маршрутов.

Пример:

router.resolve();

Можно вызывать после on для обработки URL при первой загрузке страницы.

Обновляет все ссылки <a> на странице, которые ведут на маршруты, управляемые Navigo. Позволяет использовать стандартные ссылки без перезагрузки страницы.

Пример:

router.updatePageLinks();

Метод следует вызывать после динамического добавления ссылок в DOM.

generate(name, params)

Создаёт URL для маршрута по его имени и переданным параметрам.

Синтаксис:

const url = router.generate(name, params);

Пример:

router.on('/user/:id', handler, 'user');
const url = router.generate('user', { id: 42 }); // /user/42

Позволяет абстрагироваться от конкретных строк маршрутов при навигации.

link(path, [options])

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

Пример:

const href = router.link('/about');
console.log(href); // /about

pause() и resume()

Методы управления обработкой маршрутов.

  • pause() — приостанавливает обработку изменений URL.
  • resume() — возобновляет обработку после pause.

Пример использования:

router.pause();
router.navigate('/settings', { callHandler: false });
router.resume();

Полезно при массовом изменении состояния приложения без повторного вызова обработчиков.

notFound(handler)

Регистрация обработчика для маршрутов, которые не совпали с ни одним определённым маршрутом.

Пример:

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

Можно использовать для отображения страницы 404 в SPA.

destroy()

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

Пример:

router.destroy();

hooks

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

  • before(handler) — вызывается перед обработчиком маршрута. Можно отменить переход, вернув false или промис, который отклоняется.
  • after(handler) — вызывается после выполнения обработчика маршрута.

Пример:

router.hooks({
  before: (done, params) => {
    console.log('Перед маршрутом', params);
    done(); // обязательно вызвать
  },
  after: (params) => {
    console.log('После маршрута', params);
  }
});

Хуки полезны для авторизации, логирования или выполнения анимаций при переходе между страницами.

Работа с параметрами маршрутов

В обработчике маршрута доступен объект params:

router.on('/product/:category/:id', ({ params }) => {
  console.log(params.category, params.id);
});
  • Динамические сегменты: :id, :slug
  • Необязательные сегменты: :id?
  • Сегменты с регулярными выражениями: /user/:id(\\d+)

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

Можно объединять маршруты в группы с общим префиксом:

router.on('/admin/*', ({ params }) => {
  console.log('Админский раздел', params);
});

* обозначает wildcard для всех вложенных маршрутов.

Советы по использованию методов экземпляра

  • Всегда вызывать resolve() после регистрации маршрутов при загрузке страницы.
  • Для динамических ссылок использовать link() или generate() вместо ручного указания URL.
  • Для управления сложными переходами использовать pause() и resume().
  • Использовать notFound() для SPA-404 страниц.
  • Хуки позволяют внедрять общую логику перед или после всех маршрутов, что упрощает авторизацию и контроль состояния.
Оглавление