Vue: атрибуты active-class и exact-active-class в шаблоне Печать
Добавил(а) microsin   

Это атрибуты компонента router-link библиотеки Vue Router. Они управляют CSS-классами активных ссылок.

[Атрибут active-class]

Этим атрибутом указывается CSS-класс, который применяется когда ссылка активна (URL совпадает с путём ссылки).

< !-- По умолчанию используется класс 'router-link-active' -->
< router-link to="/about">О нас< /router-link>

< !-- Кастомный класс для активной ссылки -->
< router-link 
  to="/about" 
  active-class="active-link"
>
  О нас
< /router-link>

[Атрибут exact-active-class]

Класс для точного совпадения маршрута (когда URL совпадает полностью).

< !--   Для '/' будет active-class  Для '/about' будет exact-active-class -->
< router-link 
  to="/" 
  active-class="active-parent"
  exact-active-class="active-exact"
>
  Главная
< /router-link>

Разница в поведении:

< router-link to="/">Главная< /router-link>
< router-link to="/users">Пользователи< /router-link>
< router-link to="/users/123">Профиль< /router-link>

При URL `/users/123`:

- Главная — не активна
- Пользователи — активна (`router-link-active`)
- Профиль — точно активна (`router-link-exact-active`)

Глобальная настройка:

// router/index.js
const router = new VueRouter({
  routes: [...],
  linkActiveClass: 'my-active-class',
  linkExactActiveClass: 'my-exact-active-class'
})

Практический пример в шаблоне:

< template>
  < nav>
    < router-link 
      to="/" 
      exact-active-class="bg-blue-500 text-white"
      active-class="bg-blue-200"
      class="px-4 py-2 rounded"
    >
      Главная
    < /router-link>
    
    < router-link 
      to="/products"
      active-class="bg-blue-200"
      exact-active-class="bg-blue-500 text-white"
    >
      Товары
    < /router-link>
  < /nav>
< /template>

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