Как программно сформировать меню навигации (toNav), передавая название, статус активности и параметры URL?
Программное формирование меню навигации (toNav) — это подход, при котором структура меню создаётся динамически на основе данных, а не прописывается вручную в HTML. Это особенно удобно, когда пункты меню зависят от роли пользователя, текущего маршрута или конфигурации приложения.
## Основная концепция toNav
Функция или метод `toNav` принимает массив объектов, каждый из которых описывает один пункт навигации. Типичная структура объекта включает:
— **label / name** — отображаемое название пункта меню;
— **active** — булевый флаг, указывающий, является ли пункт активным (текущим);
— **url / href** — строка URL или объект с параметрами маршрута;
— **params** — дополнительные query-параметры или path-параметры.
## Пример реализации на JavaScript
javascript
function toNav(items) {
return items.map(item => ({
label: item.name,
href: buildUrl(item.url, item.params),
isActive: item.active || false,
className: item.active ? ‘nav-item nav-item—active’ : ‘nav-item’
}));
}
function buildUrl(base, params) {
if (!params || Object.keys(params).length === 0) return base;
const query = new URLSearchParams(params).toString();
return `${base}?${query}`;
}
const navItems = toNav([
{ name: ‘Главная’, url: ‘/’, active: true },
{ name: ‘Каталог’, url: ‘/catalog’, params: { page: 1, sort: ‘asc’ } },
{ name: ‘Контакты’, url: ‘/contacts’ }
]);
## Передача параметров URL
Параметры URL могут быть двух типов:
1. **Path-параметры** — встраиваются непосредственно в путь, например `/user/42`. Для их подстановки используют шаблонные строки или библиотеки маршрутизации.
2. **Query-параметры** — добавляются после `?`, например `/catalog?page=1&sort=asc`. Для их формирования удобно использовать `URLSearchParams`.
## Управление статусом активности
Активный пункт меню определяется сравнением текущего URL с адресом пункта. В фреймворках (Vue Router, React Router) это делается автоматически через компоненты « или «. При ручной реализации сравнивают `window.location.pathname` с полем `url` каждого пункта.
javascript
function isActive(url) {
return window.location.pathname === url;
}
## Интеграция с фреймворками
— **Vue.js**: передавайте массив в компонент и используйте `router-link` с `:to=»{ path: item.url, query: item.params }»` и `:class=»{ active: item.active }»` .
— **React**: используйте `NavLink` из `react-router-dom`, передавая `to={{ pathname, search }}`.
— **Angular**: применяйте `routerLink` с `[queryParams]` и `routerLinkActive`.
## Советы по проектированию
— Выносите конфигурацию меню в отдельный файл (например, `navConfig.js`), чтобы упростить поддержку.
— Добавляйте поля `icon`, `children` (для вложенных меню) и `permissions` (для ролевого доступа).
— Используйте мемоизацию при частых перерисовках, чтобы не пересчитывать структуру меню на каждый рендер.
Таким образом, функция `toNav` становится универсальным адаптером между конфигурацией приложения и визуальным представлением навигации.