Замена истории

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

Метод navigate и его ключевые возможности

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

router.navigate(path, { 
  trigger: true, 
  replace: false 
});
  • path — строка с целевым URL, на который необходимо перейти.
  • trigger — логический флаг, указывающий, нужно ли запускать обработчики маршрутов после изменения URL.
  • replace — логический флаг, определяющий, заменять ли текущую запись в истории (true) или добавлять новую (false).

Пример замены текущего URL без создания новой записи истории:

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

В этом случае URL изменится на /dashboard, но кнопка «Назад» в браузере не вернёт пользователя на предыдущий путь, так как текущая запись истории была заменена.

Отличие replace от обычной навигации

Обычная навигация (replace: false) создаёт новую запись в истории, что позволяет пользователю возвращаться к предыдущему маршруту с помощью кнопки «Назад». Использование replace: true актуально в следующих случаях:

  • После авторизации или выхода из системы, когда предыдущие маршруты становятся неактуальными.
  • При автоматическом перенаправлении на корректный путь, например с / на /home.
  • При обновлении состояния маршрута без необходимости хранить старый URL в истории (например, при изменении параметров фильтрации).

Программная замена URL без триггера маршрута

Иногда требуется изменить URL без запуска обработчиков маршрутов. Для этого используется комбинация navigate с опцией trigger: false:

router.navigate('/profile?tab=settings', { trigger: false, replace: true });

В данном примере адрес изменяется, история заменяется, но маршруты не перезапускаются. Такой подход полезен при обновлении параметров запроса или состояния интерфейса без полной перерисовки компонентов.

Работа с состоянием истории

Navigo поддерживает работу с состоянием истории через объект window.history. Можно сохранить дополнительную информацию в записи истории, используя API браузера:

const state = { filter: 'active' };
window.history.replaceState(state, '', '/tasks');

Этот метод совместим с replace: true в navigate, позволяя хранить и извлекать данные состояния при навигации.

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

const router = new Navigo('/');

router.on({
  '/home': () => console.log('Главная страница'),
  '/dashboard': () => console.log('Панель управления'),
  '/profile': () => console.log('Профиль пользователя')
}).resolve();

// Переход с заменой текущего URL
router.navigate('/dashboard', { trigger: true, replace: true });

// Обновление параметров без вызова обработчиков
router.navigate('/profile?tab=security', { trigger: false, replace: true });

В этом примере:

  1. Навигация на /dashboard заменяет текущий URL и вызывает обработчик маршрута.
  2. Изменение /profile с параметром tab заменяет URL без вызова обработчика, позволяя обновить адрес без лишней перерисовки.

Лучшие практики замены истории

  • Использовать replace: true для перенаправлений — это предотвращает засорение истории промежуточными маршрутами.
  • Комбинировать с trigger: false при изменении состояния — обеспечивает динамическое обновление URL без перезапуска маршрутов.
  • Хранить важные состояния в history.state — помогает при восстановлении состояния интерфейса после обновления страницы или возвращения к маршруту.

Замена истории в Navigo — это простой и эффективный инструмент для управления URL и состояния приложения, который позволяет создавать плавные переходы и контролировать поведение браузера без полной перезагрузки страницы.

Оглавление