Вопрос или проблема
Текущая версия Vue3 автоматически добавляет активный класс к элементу <a>
, сгенерированному router-link. Но что если я хочу, чтобы этот класс был у родительского элемента <li>
?
Существует ли быстрый и простой способ сделать это, или мне нужно проверять его в цикле?
<ul>
<li><router-link :to="{ name: 'Dashboard' }" class="nav-link" active-class="active"> Dashboard </router-link></li>
<li><router-link :to="{ name: 'Login' }" class="nav-link"> Login </router-link></li>
</ul>
Вы можете использовать псевдокласс has
, чтобы стилизовать ваш элемент li в зависимости от класса a
:
li:has(a.active){
/* ваш стиль */
}
Ответ или решение
В Vue 3 поведение router-link подразумевает автоматическое добавление класса "active" к создаваемому элементу <a>
. Однако если вы хотите добавить этот класс к родительскому элементу <li>
, это можно сделать несколькими способами.
Способ 1: Использование CSS Псевдокласса :has()
Вы можете использовать CSS-псевдокласс :has()
, чтобы стилизовать элемент <li>
, основываясь на классе его дочернего элемента <a>
. Пример кода:
<ul>
<li>
<router-link :to="{ name: 'Dashboard' }" class="nav-link">Dashboard</router-link>
</li>
<li>
<router-link :to="{ name: 'Login' }" class="nav-link">Login</router-link>
</li>
</ul>
<style>
li:has(a.active) {
/* Ваши стили */
background-color: #f0f0f0; /* Пример фона для активного элемента */
}
</style>
Обратите внимание, что :has()
не поддерживается во всех браузерах, поэтому перед использованием стоит проверить совместимость.
Способ 2: Использование computed свойств Vue
Другой способ заключается в том, чтобы использовать computed свойства для определения активной ссылки и динамически добавлять класс к элементу <li>
. Пример:
<template>
<ul>
<li :class="{ active: isActive('Dashboard') }">
<router-link :to="{ name: 'Dashboard' }" class="nav-link">Dashboard</router-link>
</li>
<li :class="{ active: isActive('Login') }">
<router-link :to="{ name: 'Login' }" class="nav-link">Login</router-link>
</li>
</ul>
</template>
<script>
export default {
computed: {
currentRoute() {
return this.$route.name;
}
},
methods: {
isActive(routeName) {
return this.currentRoute === routeName;
}
}
}
</script>
<style>
li.active {
/* Ваши стили для активного элемента */
background-color: #f0f0f0; /* Пример фона для активного элемента */
}
</style>
Заключение
В зависимости от ваших предпочтений и требований проекта, вы можете выбрать любой из этих подходов. Использование :has()
является более декларативным, тогда как использование computed свойств и методов Vue даёт вам больше контроля и гибкости. Выбор метода зависит от совместимости браузера и предпочтений вашей команды.