Vue3中如何为激活的router-link的父元素<li>添加active类

不用循环校验，Vue Router提供了更直接的方式，用router-link的**作用域插槽（v-slot）**就能轻松实现，直接把激活状态绑定到父元素<li>上：

<ul>
  <li :class="{ active: isActive }">
    <router-link 
      :to="{ name: 'Dashboard' }" 
      class="nav-link"
      v-slot="{ isActive }"
    >
      Dashboard
    </router-link>
  </li>
  <li :class="{ active: isActive }">
    <router-link 
      :to="{ name: 'Login' }" 
      class="nav-link"
      v-slot="{ isActive }"
    >
      Login
    </router-link>
  </li>
</ul>

原理很简单：router-link的作用域插槽会暴露isActive（精确匹配激活）和isExactActive（完全匹配激活）这两个状态值，直接把它绑定到父元素<li>的class上就行，不用自己写校验逻辑。

如果你的导航项很多，也可以把逻辑抽成一个组件，复用起来更方便：

<!-- NavItem.vue -->
<template>
  <li :class="{ active: isActive }">
    <router-link 
      :to="to" 
      class="nav-link"
      v-slot="{ isActive }"
    >
      <slot></slot>
    </router-link>
  </li>
</template>

<script setup>
defineProps(['to'])
</script>

使用的时候就更简洁：

<ul>
  <NavItem :to="{ name: 'Dashboard' }">Dashboard</NavItem>
  <NavItem :to="{ name: 'Login' }">Login</NavItem>
</ul>

另外还有个更简单的CSS方案，如果你只需要样式层面的效果，直接通过后代选择器给父元素加样式就行：

/* 当子元素router-link激活时，给父li加样式 */
li:has(.nav-link.active) {
  /* 你的激活样式 */
  background-color: #f0f0f0;
}

不过这个依赖CSS的:has()选择器，要注意浏览器兼容性（现代浏览器基本都支持）。

内容的提问来源于stack exchange，提问作者Roi