|
Это атрибуты компонента 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>
Это особенно полезно для стилизации навигационных меню, где нужно различать родительские и дочерние маршруты. |
