Настройка linkActiveClass

Vue Router предоставляет возможность создавать динамическую навигацию между компонентами в одностраничных приложениях (SPA). Одним из ключевых инструментов для управления активными ссылками является свойство linkActiveClass, позволяющее задать CSS-класс, который будет автоматически применяться к <router-link> при совпадении текущего маршрута.

Назначение linkActiveClass

По умолчанию Vue Router использует класс router-link-active для активного <router-link>. Это означает, что когда текущий путь совпадает с to маршрутом ссылки, к элементу добавляется этот класс, что удобно для стилизации активного состояния, например, подсветки меню или изменения цвета текста.

Однако в реальных проектах часто требуется использовать собственные классы, чтобы соответствовать существующему стилевому гиду или CSS-фреймворку. Для этого служит linkActiveClass, который позволяет полностью переопределить стандартный класс.

const router = VueRouter.createRouter({
  history: VueRouter.createWebHistory(),
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About },
    { path: '/contact', component: Contact }
  ],
  linkActiveClass: 'active-link'
})

В этом примере все <router-link> автоматически будут получать класс active-link вместо стандартного router-link-active.

Отличие linkActiveClass от exactActiveClass

Важно различать два похожих свойства:

  • linkActiveClass — применяется, если текущий путь начинается с пути ссылки. Например, для <router-link to="/about"> класс будет активен и при /about/team, /about/history.
  • exactActiveClass — применяется только при точном совпадении пути. Для той же ссылки <router-link to="/about"> класс будет активен только на /about, но не на /about/team.
const router = VueRouter.createRouter({
  history: VueRouter.createWebHistory(),
  routes: [...],
  linkActiveClass: 'active-link',
  exactActiveClass: 'exact-active-link'
})

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

Гибкая стилизация активных ссылок

С помощью linkActiveClass можно реализовать:

  1. Изменение цвета текста и фона:
.active-link {
  color: white;
  background-color: #007BFF;
  border-radius: 4px;
  padding: 4px 8px;
}
  1. Добавление анимации при активации ссылки:
.active-link {
  transition: all 0.3s ease-in-out;
  transform: scale(1.05);
}
  1. Комбинированное использование с фреймворками:

Если проект использует Bootstrap, можно назначить linkActiveClass: 'active', чтобы интегрировать стандартные классы.

Особенности работы linkActiveClass с вложенными маршрутами

При работе с nested routes (children) важно учитывать, что linkActiveClass будет применяться ко всем ссылкам, путь которых является префиксом текущего маршрута.

Пример:

const routes = [
  { path: '/dashboard', component: Dashboard, children: [
    { path: 'stats', component: Stats },
    { path: 'reports', component: Reports }
  ]}
]
  • Ссылка <router-link to="/dashboard">Dashboard</router-link> получит active-link, когда текущий путь /dashboard/stats или /dashboard/reports.
  • Если нужна активация только при точном совпадении /dashboard, используется exactActiveClass.

Динамическая настройка через маршрутизатор

Можно менять linkActiveClass программно при создании маршрутизатора или в плагинах, передавая разный класс в зависимости от темы приложения или условий:

const theme = 'dark'; // или 'light'
const router = VueRouter.createRouter({
  history: VueRouter.createWebHistory(),
  routes: [...],
  linkActiveClass: theme === 'dark' ? 'dark-active' : 'light-active'
})

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

Ограничения и рекомендации

  • linkActiveClass работает только с компонентами <router-link>.
  • Не следует использовать одинаковый класс одновременно с внешними CSS-селекторами, чтобы избежать конфликтов.
  • Для сложных меню с глубокими вложенными маршрутами рекомендуется комбинировать linkActiveClass и exactActiveClass, чтобы четко разграничить активное состояние родительских и дочерних ссылок.

Итоговые советы по использованию

  • Всегда задавать linkActiveClass на уровне маршрутизатора, а не в отдельных компонентах, чтобы сохранить единообразие.
  • Подбирать название класса, соответствующее стилевым стандартам проекта.
  • Использовать в сочетании с exactActiveClass для точной настройки визуальных эффектов на навигационных элементах.
Оглавление