Метод navigate

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

Синтаксис

router.navigate(path, [absolute]);

Параметры:

path — строка, представляющая путь маршрута, на который необходимо перейти. Например: '/home', '/about', '/users/123'.
absolute (опционально) — булевый параметр, определяющий, является ли указанный путь абсолютным.
- true — путь интерпретируется как абсолютный URL относительно корня сайта.
- false или отсутствует — путь интерпретируется относительно текущего маршрута.

Основные возможности

1. Программная навигация

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

router.navigate('/dashboard');

Этот вызов изменяет URL на /dashboard и автоматически вызывает обработчики маршрутов, зарегистрированные через router.on().

2. Поддержка параметров маршрута

Navigo позволяет передавать параметры через URL. Метод navigate корректно работает с параметризованными маршрутами. Пример:

router.on('/users/:id', (params) => {
  console.log(params.id);
});

router.navigate('/users/42'); // Выведет: 42

Здесь :id является динамическим сегментом маршрута. При навигации метод автоматически подставляет значение и активирует соответствующий обработчик.

3. Абсолютные и относительные маршруты

Использование второго аргумента позволяет управлять интерпретацией пути. Рассмотрим пример:

// Текущий маршрут: /app
router.navigate('settings');           // Переход на /app/settings
router.navigate('/settings', true);    // Переход на /settings

Без флага absolute путь считается относительным к текущему маршруту.
С флагом true путь трактуется как абсолютный, начиная с корня сайта.

4. Переход с опциональными параметрами

Метод navigate совместим с маршрутами, содержащими опциональные параметры:

router.on('/posts/:id?', (params) => {
  console.log(params.id);
});

router.navigate('/posts');      // params.id = undefined
router.navigate('/posts/99');   // params.id = 99

Знак вопроса ? делает параметр необязательным, и метод navigate корректно обрабатывает оба варианта.

Особенности работы

Автоматическая активация обработчиков: После вызова navigate соответствующие маршруты обрабатываются автоматически.
История браузера: Navigo обновляет историю браузера через history.pushState, что обеспечивает корректное использование кнопок «Назад» и «Вперед».
Поддержка хэш-маршрутизации: При инициализации с хэшами (new Navigo(root, { hash: true })) метод navigate автоматически формирует URL с #.

Примеры комплексного использования

const router = new Navigo('/');

router
  .on('/home', () => console.log('Главная'))
  .on('/about', () => console.log('О сайте'))
  .on('/users/:id', (params) => console.log('Пользователь', params.id));

// Программные переходы
router.navigate('/home');       // Выведет: Главная
router.navigate('/about');      // Выведет: О сайте
router.navigate('/users/123');  // Выведет: Пользователь 123

// Абсолютный и относительный путь
router.navigate('users/456');   // Относительно текущего маршрута
router.navigate('/users/456', true); // Абсолютный путь

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