如何在 Vue3 中将活动类添加到活动路由器链接的<li>

Question

当前的 Vue3 行为是自动将活动类添加到由 router-link 生成的

<a>

标签中。如果我想把它放在它所属的父级

<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>

Answer 1

您可以使用

has

伪类来基于

a

类来设置 li 的样式：

li:has(a.active){
 /* your style */
}