Настройка linkExactActiveClass

linkExactActiveClass — это один из ключевых параметров настройки Vue Router, который позволяет контролировать класс CSS, применяемый к активной ссылке маршрута. Он отличается от linkActiveClass тем, что срабатывает только при точном совпадении текущего пути с маршрутом ссылки, а не при совпадении частичном или дочерних маршрутах.

Основное назначение

Когда в приложении используется множество навигационных ссылок, часто требуется визуально выделять только ту ссылку, которая полностью соответствует текущему маршруту. Для этого и используется linkExactActiveClass. Например:

const router = VueRouter.createRouter({
  history: VueRouter.createWebHistory(),
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About },
    { path: '/about/team', component: Team }
  ],
  linkExactActiveClass: 'exact-active'
});

В этом примере, класс exact-active будет применён только к ссылке, если путь строго совпадает с маршрутом (/about не активирует ссылку /about/team).

Отличие от `linkActiveClass`

linkActiveClass — применяется к ссылкам, если текущий путь начинается с маршрута ссылки, включая дочерние маршруты.
linkExactActiveClass — применяется только при полном совпадении маршрута.

Пример визуализации различий:

<router-link to="/about" class="nav-link">О нас</router-link>
<router-link to="/about/team" class="nav-link">Команда</router-link>

Если текущий путь /about, класс linkActiveClass может подсветить обе ссылки, так как /about/team начинается с /about.
linkExactActiveClass подсветит только /about.

Настройка через глобальный роутер

linkExactActiveClass задаётся при создании экземпляра роутера:

const router = VueRouter.createRouter({
  history: VueRouter.createWebHistory(),
  routes: [
    { path: '/', component: Home },
    { path: '/contact', component: Contact }
  ],
  linkExactActiveClass: 'active-exact'
});

После этого любой <router-link> автоматически использует класс active-exact при точном совпадении маршрута. Нет необходимости указывать класс в каждой ссылке вручную.

Локальная настройка для отдельного `<router-link>`

Можно задать точный класс только для конкретной ссылки, используя атрибут exact-active-class:

<router-link 
  to="/contact" 
  exact-active-class="contact-active">
  Контакты
</router-link>

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

Работа с динамическими маршрутами

Динамические маршруты, например /user/:id, требуют внимательности при применении linkExactActiveClass. Класс сработает только если путь совпадает точно, включая динамический сегмент:

const routes = [
  { path: '/user/:id', component: User }
];

<router-link 
  :to="`/user/${user.id}`" 
  exact-active-class="user-active">
  Профиль
</router-link>

Если текущий путь /user/42, класс user-active применится только к ссылке /user/42, а ссылка /user/43 останется без него.

Совместимость с вложенными маршрутами

При использовании вложенных маршрутов важно понимать, что linkExactActiveClass применяется только к полной совпадающей ссылке, а не к родительским маршрутам. Для подсветки родительских элементов необходимо использовать linkActiveClass.

const routes = [
  { path: '/dashboard', component: Dashboard,
    children: [
      { path: 'stats', component: Stats }
    ]
  }
];

Ссылка <router-link to="/dashboard"> не получит exact-active-class, если текущий путь /dashboard/stats.
Для родительской ссылки можно использовать linkActiveClass.

Применение в навигационных меню

В больших приложениях часто создаются боковые панели или верхние меню с множеством маршрутов. Настройка linkExactActiveClass упрощает подсветку активного пункта меню без лишних вычислений или условий в компоненте.

<nav>
  <router-link to="/" exact-active-class="menu-active">Главная</router-link>
  <router-link to="/about" exact-active-class="menu-active">О нас</router-link>
  <router-link to="/contact" exact-active-class="menu-active">Контакты</router-link>
</nav>

Каждый пункт меню подсвечивается только при полном совпадении пути.
Возможна стилизация через CSS:

.menu-active {
  font-weight: bold;
  border-bottom: 2px solid #42b983;
}