В Vue.js Vue Router — это мощный инструмент, позволяющий легко создавать одностраничные приложения. Одной из его удобных функций является возможность применить активный класс к текущему маршруту, что позволяет легко выделить активную ссылку в меню навигации. В этой статье мы рассмотрим различные методы достижения этого эффекта и предоставим вам практические примеры кода. Итак, давайте погрузимся и освоим искусство активного класса Vue Router!

Метод 1: использование атрибута exact
Самый простой способ применить активный класс к ссылке Vue Router — использовать атрибут exact. Вот пример:

<router-link to="/" exact class="active">Home</router-link>

Метод 2: использование класса «router-link-active».
Vue Router автоматически добавляет класс «router-link-active» к активной ссылке. Вы можете использовать этот класс для стилизации активной ссылки по своему желанию. Например:

.router-link-active {
  color: blue;
  font-weight: bold;
}

Метод 3: настройка имени активного класса
Если вы предпочитаете другое имя класса для активной ссылки, вы можете настроить его с помощью атрибута «active-class». Вот как это можно сделать:

<router-link to="/" active-class="my-active-class">Home</router-link>

Метод 4: применение активного класса к родительским маршрутам
Иногда у вас могут быть вложенные маршруты, и вы хотите применить активный класс к родительскому маршруту, когда какой-либо из его дочерних маршрутов активен. Этого можно добиться, используя атрибут «exact-active-class»:

<router-link to="/parent" exact-active-class="active">Parent</router-link>

Метод 5: программная установка активного класса
В некоторых случаях может потребоваться динамическая установка активного класса в зависимости от определенных условий. Это можно сделать, привязав объект класса к директиве “:class”:

<router-link :to="{ path: '/dynamic' }" :class="{ 'active': isActive }">Dynamic Link</router-link>

В этом примере переменная isActive может быть вычислена на основе логики вашего приложения.

В этой статье мы рассмотрели несколько методов применения активного класса к ссылкам Vue Router. Используя атрибут «exact», класс «router-link-active», настраивая имена классов, применяя активный класс к родительским маршрутам и программно устанавливая активный класс, вы теперь имеете комплексный набор инструментов для выделения активной ссылки в вашем Vue. js-приложения. Поэкспериментируйте с этими методами и выберите тот, который лучше всего соответствует требованиям вашего проекта.