Навигация назад и вперед

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

В основе работы лежит History API, которое позволяет обновлять URL без перезагрузки страницы. Navigo инкапсулирует вызовы history.pushState, history.replaceState и обработку события popstate, что делает управление маршрутизацией интуитивным.

Обработка кнопок браузера «Назад» и «Вперед»

При использовании Navigo стандартные кнопки браузера работают автоматически, если маршрутизатор инициализирован корректно:

import Navigo from 'navigo';

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

router
  .on('/', () => {
    document.body.textContent = 'Главная страница';
  })
  .on('/about', () => {
    document.body.textContent = 'О проекте';
  })
  .resolve();

Когда пользователь кликает на ссылку <a href="/about">, Navigo вызывает pushState и обновляет URL, не перезагружая страницу. После этого кнопка «Назад» ведёт к предыдущему маршруту, а «Вперед» возвращает к следующему.

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

Navigo позволяет управлять историей программно с помощью методов:

  • navigate(path, absolute = false) – переход к маршруту, добавление нового состояния в историю.
  • history API через методы router.navigate() и router.updatePageLinks().

Пример перехода к маршруту:

router.navigate('/about'); // Переход на страницу "О проекте"

Если требуется заменить текущий URL без добавления новой записи в историю (аналог replaceState):

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

Обратные переходы с использованием History API

В случае необходимости контроля над историей можно использовать методы window.history.back() и window.history.forward(). Navigo автоматически обрабатывает событие popstate, поэтому маршруты корректно реагируют на такие вызовы:

document.getElementById('backBtn').addEventListener('click', () => {
  window.history.back();
});

document.getElementById('forwardBtn').addEventListener('click', () => {
  window.history.forward();
});

Важно помнить, что любые изменения URL через pushState и replaceState должны соответствовать зарегистрированным маршрутам. Если маршрут не найден, можно использовать обработчик notFound:

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

Состояние маршрутов и параметров

Navigo позволяет передавать параметры маршрута и управлять ими при переходах:

router.on('/user/:id', ({ data }) => {
  console.log('ID пользователя:', data.id);
}).resolve();

При программной навигации:

router.navigate('/user/42'); // История обновляется, параметры доступны

Если пользователь возвращается назад, параметры маршрута восстанавливаются автоматически благодаря обработке события popstate.

Управление глубиной истории и отмена переходов

Для сложных приложений полезно контролировать глубину истории или отменять переходы. Например, можно хранить стек посещённых маршрутов:

const historyStack = [];

router.hooks({
  before: (done, match) => {
    historyStack.push(match.url);
    done();
  }
});

Теперь можно реализовать собственный механизм навигации «назад» внутри приложения, независимо от стандартной кнопки браузера:

function goBackInternal() {
  if (historyStack.length > 1) {
    historyStack.pop();
    router.navigate(historyStack[historyStack.length - 1], { replace: true });
  }
}

События, связанные с историей

Navigo предоставляет хуки для отслеживания навигации и управления историей:

  • before – вызывается перед сменой маршрута, можно отменить переход.
  • after – вызывается после успешного перехода.
  • destroy – очистка маршрутов и событий при необходимости.

Пример логирования переходов:

router.hooks({
  after: (match) => {
    console.log('Переход на маршрут:', match.url);
  }
});

Работа с hash-режимом и историей

В конфигурации hash-режима ({ hash: true }) Navigo формирует URL с # вместо использования History API. Это полезно для приложений, где сервер не поддерживает pushState. Переходы назад и вперед в hash-режиме также работают автоматически, благодаря событию hashchange:

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

router.on('/page/:id', ({ data }) => {
  console.log('Hash-страница:', data.id);
}).resolve();

Использование router.navigate('/page/3') обновляет hash и добавляет запись в историю браузера.

Практические рекомендации

  • Всегда регистрировать все маршруты, к которым могут вести переходы назад и вперед.
  • Использовать replace: true при обновлении состояния без добавления новой записи.
  • Хуки before и after помогают управлять логикой навигации и отслеживать действия пользователя.
  • Для сложной логики с отменой или условными переходами можно комбинировать стек собственных маршрутов и стандартные методы window.history.back()/forward().
  • Hash-режим подходит для приложений без поддержки сервера, pushState лучше для SEO и чистых URL.

Эти механизмы позволяют строить гибкую навигацию, полностью контролировать историю браузера и создавать интерфейсы с динамическим изменением контента без перезагрузки страницы.

Оглавление