Навигация между страницами

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

Создание нового маршрутизатора начинается с инициализации объекта Navigo:

import Navigo from 'navigo';

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

Параметры:

  • Первый аргумент ('/') задаёт корневой путь приложения.
  • Опция { hash: true } включает работу с хеш-URL, что полезно для простого SPA без серверной поддержки маршрутов.

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

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

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

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

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

router.on('/user/:id', (params) => {
    console.log(`Пользователь с ID: ${params.id}`);
});
  • :id — это плейсхолдер, который будет автоматически передан в объект params.
  • Можно использовать несколько параметров, например /post/:postId/comment/:commentId.

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

Navigo предоставляет метод navigate, который позволяет менять URL и вызывать соответствующий обработчик без перезагрузки страницы:

router.navigate('/about');

Переход может включать замену истории браузера:

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

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

Метод notFound позволяет определить поведение при вводе некорректного URL:

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

Это особенно важно для SPA, чтобы не перенаправлять пользователя на серверные 404.

Использование регулярных выражений и сложных маршрутов

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

router.on({
    '/product/:id': (params) => console.log(params.id),
    '/category/:name([a-z]+)': (params) => console.log(params.name)
});
  • ([a-z]+) ограничивает допустимые значения параметра.
  • Можно комбинировать несколько маршрутов в одном объекте.

Хуки и переходы

Navigo позволяет добавлять предобработку маршрутов с помощью хуков before:

router.on('/dashboard', () => {
    console.log('Панель управления');
}).before(() => {
    const isLoggedIn = true; // логика авторизации
    if (!isLoggedIn) {
        router.navigate('/login');
        return false; // отменяет текущий маршрут
    }
});
  • before вызывается перед обработчиком маршрута.
  • Возврат false отменяет переход.

Ссылки и автоматическая навигация

Для SPA удобно использовать ссылки, которые не перезагружают страницу:

<a href="/home" data-navigo>Главная</a>
<a href="/about" data-navigo>О сайте</a>
  • Атрибут data-navigo сигнализирует Navigo о том, что клик по ссылке должен обрабатываться через маршрутизатор.
  • После динамического добавления ссылок можно вызвать router.updatePageLinks() для активации обработки.

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

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

router.on('/user/:id', {
    '/profile': (params) => console.log(`Профиль пользователя ${params.id}`),
    '/settings': (params) => console.log(`Настройки пользователя ${params.id}`)
});
  • Вложенные маршруты удобно использовать для панелей управления и личных кабинетов.

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

Navigo поддерживает два режима работы с URL:

  1. Hash mode (hash: true) — URL вида /#/page, не требует серверной поддержки.
  2. History mode (hash: false) — чистый URL /page, требует настройки сервера для перенаправления всех маршрутов на index.html.
const router = new Navigo('/', { hash: false });
  • В History mode важно настроить сервер, чтобы все запросы попадали на SPA, иначе при обновлении страницы произойдет ошибка 404.

События и подписка на изменения маршрута

Метод hooks позволяет подписываться на события:

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

Асинхронная маршрутизация

Обработчики маршрутов могут быть асинхронными, что удобно для загрузки данных с сервера:

router.on('/posts', async () => {
    const response = await fetch('/api/posts');
    const posts = await response.json();
    console.log(posts);
});
  • Асинхронные функции позволяют управлять загрузкой данных и рендерингом динамических страниц без блокировки интерфейса.

Настройка глобальных опций

Можно задавать глобальные настройки при инициализации:

const router = new Navigo('/', {
    hash: true,
    noMatchWarning: false
});
  • noMatchWarning: false отключает предупреждения при отсутствии совпадения маршрута.
  • Эти опции позволяют тонко настроить работу маршрутизатора под конкретное SPA.

Интеграция с фреймворками

Navigo легко интегрируется с Vanilla JS и простыми библиотеками для рендеринга:

router.on('/home', () => {
    document.getElementById('app').innerHTML = '<h1>Главная страница</h1>';
});
  • Для React, Vue или Svelte Navigo может использоваться для управления URL и состояния, при этом рендеринг компонентов происходит привычным способом фреймворка.

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

Оглавление