Вопрос или проблема
Текущая версия 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 даёт вам больше контроля и гибкости. Выбор метода зависит от совместимости браузера и предпочтений вашей команды.