Информация о последнем переходе

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

Получение информации о последнем маршруте

Для работы с последним переходом используется объект router.lastRouteResolved(). Этот метод возвращает объект с детальной информацией о маршруте, который был активен на момент последнего срабатывания маршрутизатора. Структура объекта включает следующие поля:

  • url — полный путь маршрута, включая параметры запроса.
  • route — объект маршрута, определённый при настройке Navigo.
  • params — объект с параметрами маршрута (динамическими сегментами пути).
  • queryString — строка запроса из URL.
  • hash — фрагмент после символа # в URL.
  • data — любые дополнительные данные, переданные через метод навигации navigate().

Пример получения информации о последнем маршруте:

import Navigo from 'navigo';

const router = new Navigo('/');

router.on('/user/:id', (params) => {
  console.log('Параметры текущего маршрута:', params);
});

router.on(() => {
  const lastRoute = router.lastRouteResolved();
  if (lastRoute) {
    console.log('URL последнего маршрута:', lastRoute.url);
    console.log('Параметры маршрута:', lastRoute.params);
    console.log('Строка запроса:', lastRoute.queryString);
  }
});

router.resolve();

В этом примере после каждого срабатывания маршрута в консоль выводится информация о последнем переходе.

Отличия между текущим и последним маршрутом

Важно понимать, что lastRouteResolved() всегда возвращает данные о предыдущем переходе, а не о текущем активном маршруте. Для сравнения используется метод router.lastRouteResolved() и объект, переданный в текущем обработчике маршрута.

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

router.on('/posts/:postId', (params, query) => {
  console.log('Текущий маршрут:', params);
  console.log('Последний маршрут:', router.lastRouteResolved());
});

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

Обработка навигации назад и вперёд

Использование информации о последнем маршруте особенно удобно при работе с кнопками навигации браузера. Navigo автоматически обновляет состояние последнего маршрута при вызове router.navigate() или при ручной смене URL. Это позволяет построить следующую логику:

function navigateBack() {
  const last = router.lastRouteResolved();
  if (last) {
    router.navigate(last.url);
  }
}

В данном примере реализована простая функция возврата на предыдущий маршрут. Благодаря lastRouteResolved() можно получать полный объект маршрута, что позволяет учитывать не только URL, но и параметры и строку запроса.

Дополнительные возможности

  1. Логирование маршрутов — можно хранить историю переходов для аналитики:
const history = [];

router.on((params, query) => {
  const last = router.lastRouteResolved();
  history.push(last ? last.url : null);
});
  1. Сравнение параметров маршрута — удобно для предотвращения перерисовки компонентов при переходе между однотипными маршрутами с разными параметрами:
router.on('/product/:id', (params) => {
  const last = router.lastRouteResolved();
  if (last && last.params.id === params.id) {
    return; // не выполнять лишние действия
  }
  renderProductPage(params.id);
});
  1. Использование в асинхронной навигации — информация о последнем переходе может быть задействована при условной подгрузке данных, чтобы избежать дублирования запросов к серверу.

Практические советы

  • Для удобства хранения истории маршрутов можно создать обёртку вокруг lastRouteResolved(), которая будет автоматически поддерживать массив последних N переходов.
  • При использовании динамических сегментов URL следует учитывать, что params возвращается в виде объекта, где ключи соответствуют именам сегментов, а значения — текущим параметрам.
  • Для работы с query-параметрами рекомендуется использовать библиотеку URLSearchParams, комбинируя её с полем queryString из последнего маршрута.

Вывод информации о последнем маршруте в интерфейсе

Иногда необходимо отобразить пользователю, куда он возвращался или какой маршрут был последним. Это реализуется через простое присвоение данных DOM-элементам:

router.on(() => {
  const last = router.lastRouteResolved();
  if (last) {
    document.getElementById('last-route').textContent = `Последний маршрут: ${last.url}`;
  }
});

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

Хотите, я подготовлю следующую часть с подробной таблицей структуры объекта lastRouteResolved() и примерами для каждого поля с разбором? Это сильно облегчает понимание, какие данные реально можно использовать в проекте.

Оглавление