Алиасы маршрутов

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

Определение алиасов

Алиас маршрута — это дополнительный путь, связанный с существующим маршрутом. В Navigo они задаются при помощи свойства alias или через массив путей при регистрации маршрута.

Пример создания маршрута с алиасами:

import Navigo from "navigo";

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

router.on({
  "/home": { 
    as: "homePage",
    uses: () => {
      console.log("Главная страница");
    }
  },
  "/index": "homePage",
  "/main": "homePage"
}).resolve();

В данном примере маршруты /home, /index и /main указывают на один и тот же обработчик, зарегистрированный под именем homePage. Это экономит код и позволяет легко управлять навигацией.

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

Для удобства навигации и создания алиасов стоит использовать именованные маршруты. Имя маршрута задается через свойство as при регистрации:

router.on({
  "/about": {
    as: "aboutPage",
    uses: () => {
      console.log("Страница о нас");
    }
  }
});

После этого можно создавать алиасы, указывая имя маршрута:

router.on({
  "/company": "aboutPage",
  "/info": "aboutPage"
});

Теперь /about, /company и /info ведут к одному и тому же обработчику.

Алиасы с параметрами

Алиасы могут содержать динамические параметры. Например, маршрут с параметром :id:

router.on({
  "/product/:id": {
    as: "productPage",
    uses: ({ data }) => {
      console.log(`Просмотр продукта с ID: ${data.id}`);
    }
  },
  "/item/:id": "productPage",
  "/goods/:id": "productPage"
});

В этом примере любые запросы вида /product/42, /item/42 или /goods/42 будут передавать значение id в обработчик productPage.

Преимущества использования алиасов

  1. Упрощение кода: один обработчик может обслуживать несколько URL.
  2. Гибкая навигация: возможность легко перенаправлять пользователей с устаревших ссылок на новые.
  3. Поддержка SEO: несколько URL могут вести к одному контенту без дублирования кода.
  4. Удобство поддержки: изменения логики маршрута нужно делать только в одном месте.

Динамическая генерация алиасов

Иногда список алиасов может формироваться динамически, например, на основе данных из API:

const aliases = ["/old-home", "/start", "/welcome"];

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

aliases.forEach(path => {
  router.on(path, "homePage");
});

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

Алиасы и редиректы

Алиасы удобно использовать для создания редиректов:

router.on({
  "/old-contact": () => {
    router.navigate("/contact");
  },
  "/contact": () => {
    console.log("Страница контактов");
  }
});

Вместо дублирования обработчика /contact, /old-contact просто перенаправляет на основной маршрут.

Важные моменты

  • Алиасы работают только для существующих имен маршрутов.
  • Нельзя создавать алиас на несуществующий маршрут — Navigo выдаст ошибку при попытке навигации.
  • Для динамических параметров алиасы должны совпадать по структуре с основным маршрутом, иначе параметры могут не передаваться.

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

Оглавление