Визуализация маршрутов

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

Инициализация Navigo происходит через создание экземпляра класса Navigo:

import Navigo from 'navigo';

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

Параметры конструктора:

  • root – корневой путь приложения. Часто используется '/'.

  • options – объект с настройками, среди которых:

    • hash: true — включение маршрутизации через хеши (#).
    • linksSelector — селектор для ссылок, которые будут перехватываться Navigo.

Определение маршрутов

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

router.on('/home', () => {
  document.body.innerHTML = '<h1>Главная страница</h1>';
});

router.on('/about', () => {
  document.body.innerHTML = '<h1>О проекте</h1>';
});

Ключевые моменты:

  • Путь маршрута может содержать динамические сегменты, используя двоеточие (:):
router.on('/user/:id', (params) => {
  console.log('ID пользователя:', params.id);
});
  • Маршрут может иметь несколько обработчиков через цепочку on:
router
  .on('/dashboard', () => { console.log('Dashboard'); })
  .on('/profile', () => { console.log('Profile'); });

Обработка несуществующих маршрутов

Для перехвата любых неопределённых маршрутов используется метод notFound:

router.notFound(() => {
  document.body.innerHTML = '<h1>404: Страница не найдена</h1>';
});

Навигация и переходы

Navigo позволяет программно изменять маршрут:

  • router.navigate(path) — переход к указанному маршруту.
  • router.updatePageLinks() — обновление ссылок после динамического изменения DOM.

Пример динамического перехода:

document.getElementById('goHome').addEventListener('click', () => {
  router.navigate('/home');
});

Динамические параметры и регулярные выражения

Navigo поддерживает маршруты с параметрами и ограничениями через регулярные выражения:

router.on('/post/:id(\\d+)', (params) => {
  console.log('Номер поста:', params.id);
});
  • Параметр :id(\\d+) гарантирует, что маршрут сработает только для числового идентификатора.
  • Можно комбинировать несколько параметров: /category/:catId/post/:postId.

Поддержка вложенных маршрутов

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

router.on({
  '/settings': () => console.log('Настройки'),
  '/settings/profile': () => console.log('Профиль пользователя'),
  '/settings/security': () => console.log('Безопасность'),
});

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

Хуки и события

Navigo предоставляет возможность выполнять действия перед и после перехода по маршруту с помощью хуков:

  • before — вызывается перед обработчиком маршрута. Может предотвратить переход.
  • after — вызывается после обработки маршрута.

Пример:

router.hooks({
  before: (done, params, route) => {
    console.log('Перед переходом:', route);
    done();
  },
  after: (params, route) => {
    console.log('После перехода:', route);
  }
});

Управление историей и режимы работы

  • Hash mode (hash: true) — URL содержит #, подходящий для статических сайтов.
  • History mode (hash: false) — использует HTML5 History API для чистых URL. Требует поддержки на сервере.
const router = new Navigo('/', { hash: false });

В этом режиме переходы выглядят как обычные URL (/about), а сервер должен отдавать одно и то же приложение для всех маршрутов.

Примеры визуализации маршрутов

Для отображения текущего состояния приложения можно использовать функцию, которая обновляет DOM при каждом переходе:

function renderPage(content) {
  const container = document.getElementById('app');
  container.innerHTML = content;
}

router
  .on('/home', () => renderPage('<h1>Главная</h1>'))
  .on('/about', () => renderPage('<h1>О проекте</h1>'))
  .on('/user/:id', (params) => renderPage(`<h1>Пользователь ${params.id}</h1>`))
  .notFound(() => renderPage('<h1>404: Не найдено</h1>'));

С помощью таких подходов можно визуализировать не только текст, но и сложные компоненты интерфейса, интегрировать с фреймворками или библиотеками для рендеринга, такими как React или Vue, под управлением маршрутов Navigo.

Асинхронная загрузка контента

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

router.on('/posts/:id', async (params) => {
  const response = await fetch(`/api/posts/${params.id}`);
  const post = await response.json();
  renderPage(`<h1>${post.title}</h1><p>${post.body}</p>`);
});
  • Асинхронные функции позволяют загружать данные с сервера без блокировки интерфейса.
  • Можно комбинировать с before хуками для проверки авторизации или состояния приложения перед переходом.

Поддержка ссылок в интерфейсе

Для корректной работы ссылок с Navigo нужно вызывать updatePageLinks после добавления новых ссылок в DOM:

const link = document.createElement('a');
link.href = '/about';
link.textContent = 'О проекте';
document.body.appendChild(link);

router.updatePageLinks();

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

Хотите, я могу сделать отдельный раздел с продвинутыми паттернами визуализации маршрутов, включая анимации переходов и интеграцию с компонентной архитектурой?

Оглавление