Симуляция переходов

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

Создание экземпляра Navigo

Для начала необходимо создать объект маршрутизатора:

import Navigo from 'navigo';

const router = new Navigo('/', { hash: false });
  • Параметр '/' указывает базовый путь приложения.
  • Опция hash: false отключает использование хэшей (#) в URL.

Экземпляр маршрутизатора предоставляет методы для регистрации маршрутов и управления переходами.

Регистрация маршрутов

Маршруты связываются с функциями-обработчиками, которые вызываются при совпадении URL:

router.on('/home', () => {
    console.log('Главная страница');
});

router.on('/about', () => {
    console.log('О странице');
});

router.on('/products/:id', ({ data }) => {
    console.log(`Продукт с ID: ${data.id}`);
});

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

  • Динамические сегменты (:id) позволяют извлекать параметры из URL.
  • Функция-обработчик получает объект с параметрами (data) и другими данными маршрута.

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

Для симуляции переходов используется метод navigate:

router.navigate('/home');
router.navigate('/products/42');

Метод navigate выполняет следующие действия:

  1. Изменяет URL в адресной строке без перезагрузки страницы.
  2. Инициирует вызов соответствующего обработчика маршрута.
  3. Обновляет состояние истории браузера (history.pushState).

Важно: при использовании navigate можно передавать дополнительные опции:

router.navigate('/about', { replace: true });
  • replace: true заменяет текущую запись в истории вместо добавления новой.

Симуляция переходов с параметрами

При работе с динамическими маршрутами можно передавать параметры напрямую:

router.navigate('/products/99');

Это автоматически создаёт объект data внутри обработчика:

router.on('/products/:id', ({ data }) => {
    console.log(data.id); // 99
});

Для сложных сценариев, например с query-параметрами, можно использовать строку URL с параметрами:

router.navigate('/search?query=javascript&page=2');

Обработка переходов и хуки

Navigo предоставляет хуки, которые позволяют управлять навигацией до или после перехода:

router.hooks({
    before: (done, params) => {
        console.log('Перед переходом', params);
        done(); // необходимо вызвать для продолжения навигации
    },
    after: (params) => {
        console.log('После перехода', params);
    }
});
  • before — вызывается перед выполнением маршрута, можно использовать для проверки авторизации или асинхронной загрузки данных.
  • after — вызывается после обработки маршрута.

Программное имитация кликов

Для симуляции перехода, аналогичного клику по ссылке, используется router.navigate совместно с обработкой событий:

document.querySelector('#go-to-about').addEventListener('click', (e) => {
    e.preventDefault();
    router.navigate('/about');
});

Такой подход обеспечивает единообразное поведение переходов как через UI, так и программно.

Вызов текущего маршрута

Для проверки или повторного выполнения текущего маршрута используется метод resolve:

router.resolve();

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

Использование navigate с асинхронными маршрутами

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

router.on('/dashboard', async () => {
    const data = await fetchData();
    renderDashboard(data);
});

router.navigate('/dashboard') инициирует асинхронный маршрут точно так же, как при клике по ссылке, сохраняя последовательность вызовов хуков.

Сценарии тестирования

Симуляция переходов идеально подходит для тестирования SPA:

  1. Автоматизированная проверка маршрутов.
  2. Отладка переходов без участия пользователя.
  3. Проверка работы хуков before и after.

Пример тестового сценария:

router.navigate('/home');
router.navigate('/products/101');
router.navigate('/about');

Каждый вызов имитирует поведение пользователя и позволяет проверить обработку маршрутов и динамических параметров.

Работа с history API и pushState

Navigo использует history.pushState и history.replaceState для управления URL:

  • navigate с опцией { replace: false } → pushState
  • navigate с опцией { replace: true } → replaceState

Это обеспечивает корректную работу кнопок “Назад” и “Вперед” браузера при программной навигации.

Резюме ключевых методов для симуляции переходов

Метод Описание
navigate(path, options) Программно инициирует переход по маршруту.
resolve() Выполняет текущий маршрут по URL.
hooks({ before, after }) Управляет действиями до и после перехода.
on(path, handler) Регистрирует обработчик маршрута.

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

Оглавление