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

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

Метод navigate

Метод navigate(path, [options]) используется для перехода на другой маршрут или для обновления текущего маршрута. Параметры метода:

  • path — строка маршрута, на который нужно перейти.

  • options — объект с дополнительными настройками:

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

Пример обновления текущего маршрута без перезагрузки и без вызова обработчика:

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

router.on('/home', () => {
    console.log('Маршрут /home активен');
});

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

В этом примере URL обновится, но обработчик /home не будет вызван повторно. Это полезно при необходимости просто синхронизировать адрес с текущим состоянием приложения.

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

router.updatePageLinks();

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

Метод resolve

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

router.resolve();

Применяется, когда маршрут был изменён вручную или через navigate с callHandler: false, и требуется вызвать соответствующий обработчик.

Обновление маршрута с параметрами

Navigo поддерживает динамические параметры в маршрутах. Для обновления маршрута с параметрами используется объект params, передаваемый в navigate или через шаблон маршрута.

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

router.navigate('/user/42'); // URL обновится и вызовется обработчик

Параметры можно изменять без полной перезагрузки страницы, что делает маршрутизацию гибкой и динамичной.

Перезапись текущего маршрута без добавления в историю

Для обновления маршрута без добавления новой записи в историю браузера используется опция replace:

router.navigate('/profile', { replace: true });

Это особенно полезно при изменении состояния страницы, когда нежелательно, чтобы пользователь возвращался к предыдущему URL с помощью кнопки “Назад”.

Примеры сложных сценариев обновления

  1. Обновление маршрута с query-параметрами:
router.navigate('/search?query=javascript');
  1. Обновление маршрута без вызова обработчика, чтобы сохранить текущее состояние:
router.navigate('/dashboard', { callHandler: false });
  1. Комбинированное обновление с заменой истории и динамическими параметрами:
router.navigate('/order/123', { replace: true, callHandler: true });

Важные моменты

  • navigate всегда обновляет URL, если updateBrowserURL установлен в true.
  • Использование callHandler: false позволяет изменять адрес без повторного рендеринга контента.
  • replace: true предотвращает накопление URL в истории браузера, что критично для SPA с динамическим контентом.
  • Динамические параметры и query-параметры автоматически передаются обработчикам маршрутов.

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

Оглавление