Параметры конфигурации

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

Инициализация Navigo

Создание экземпляра Navigo производится через конструктор:

const router = new Navigo(root, useHash, hash);

Каждый параметр конструктора влияет на поведение маршрутизатора:

  1. root (строка) — корневая часть URL, относительно которой будет производиться маршрутизация. Например:
const router = new Navigo('/app/');
  • Если указать '/', роутер будет работать от корня домена.
  • Можно задавать пустую строку '', тогда маршруты будут рассчитываться относительно текущего пути.
  1. useHash (булево) — определяет, будет ли Navigo использовать хеш-часть URL (#) для маршрутизации:
const router = new Navigo('/', true);
  • true — все маршруты будут после символа #, например: example.com/#/home.
  • false — роутер использует обычные пути, например: example.com/home.

Использование хеш-маршрутов удобно при статических страницах или при отсутствии поддержки сервера для обработки History API.

  1. hash (строка) — задаёт префикс хеш-маршрутов, если useHash включён:
const router = new Navigo('/', true, '#!');
  • По умолчанию используется '#'.
  • Можно изменить на любой другой префикс, например #!/.

Метод configure

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

router.configure({
    linksSelector: 'a',
    update: null,
    hash: '#!',
    strategy: 'ALL',
});

Основные свойства конфигурации:

  1. linksSelector (строка) CSS-селектор для ссылок, на которые Navigo будет навешивать обработку клика и предотвращать перезагрузку страницы.

    • По умолчанию: 'a'.
    • Пример: 'nav a, .menu-link'.

  2. update (функция) Функция, которая вызывается каждый раз при смене маршрута. Используется для обновления состояния приложения без ручного вызова router.resolve().

router.configure({
    update: (params) => {
        console.log('Маршрут изменился:', params);
    }
});

  1. hash (строка) Префикс хеша для хеш-маршрутов. Если значение указано при useHash: true, оно будет переопределено.

  2. strategy (строка) Определяет стратегию обработки ссылок:

    • 'ALL' — все ссылки срабатывают через Navigo.
    • 'ONE' — только ссылки внутри контейнера root.
    • 'NONE' — ссылки не перехватываются.

Настройка поведения навигации

Дополнительно можно управлять поведением роутера через методы конфигурации:

  • router.notFound(handler) — задаёт обработчик для маршрутов, которые не найдены.
router.notFound(() => {
    document.body.innerHTML = '<h1>404 — Страница не найдена</h1>';
});
  • router.hooks(hooksObject) — подключение хуков для событий маршрутизатора:
router.hooks({
    before: (done, params) => {
        console.log('Перед переходом на маршрут', params);
        done();
    },
    after: (params) => {
        console.log('После перехода', params);
    }
});

Типовые хуки:

  • before(done, params) — вызывается перед выполнением маршрута. Обязателен вызов done(), чтобы переход продолжился.
  • after(params) — вызывается после перехода на маршрут.
  • already(params) — вызывается, если текущий маршрут совпадает с новым.

Пример комплексной конфигурации

const router = new Navigo('/', true, '#!');

router.configure({
    linksSelector: 'nav a',
    update: (params) => {
        console.log('Обновление состояния для', params.route);
    },
    hash: '#!',
    strategy: 'ALL'
});

router.hooks({
    before: (done, params) => {
        console.log('Подготовка к маршруту:', params.route);
        done();
    },
    after: (params) => {
        console.log('Маршрут выполнен:', params.route);
    }
});

router
    .on('/', () => console.log('Главная'))
    .on('/about', () => console.log('О нас'))
    .resolve();

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

Советы по конфигурации

  • Для проектов с серверной поддержкой History API рекомендуется useHash: false, чтобы URL выглядел чистым.
  • Для статических сайтов или приложений без серверной маршрутизации лучше использовать useHash: true.
  • linksSelector помогает ограничивать область, в которой ссылки обрабатываются Navigo, что важно при сложной DOM-структуре.
  • Хуки before и after позволяют интегрировать роутер с системой авторизации, анимациями переходов или логированием.

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

Оглавление