Nuxt3中如何为激活状态的NuxtLink设置样式？

你完全不用手动写条件类绑定，NuxtLink组件会自动给当前匹配的链接添加nuxt-link-active和nuxt-link-exact-active这两个类，直接写样式就行：

两个类的区别 #

• nuxt-link-active：当当前路由是该链接路由的子路由或完全匹配时生效（比如访问/autre/detail时，to="/autre"的链接会加上这个类）
• nuxt-link-exact-active：只有当路由完全精确匹配时才生效（只有访问/autre时，对应链接才会加这个类）

修改后的代码示例 #

<template>
  <div class="flex">
    <div class="nav-item">
      <NuxtLink to="/">Accueil</NuxtLink>
    </div>
    <div class="nav-item">
      <NuxtLink to="/autre">Autre</NuxtLink>
    </div>
    <div class="nav-item">
      <NuxtLink to="/subscribe">Souscrire</NuxtLink>
    </div>
  </div>
</template>

<style scoped>
/* 精确匹配时的样式 */
.nav-item :deep(.nuxt-link-exact-active) {
  color: #2563eb;
  border-bottom: 2px solid #2563eb;
  font-weight: bold;
}

/* 包含子路由时的样式（可选） */
.nav-item :deep(.nuxt-link-active) {
  color: #60a5fa;
}
</style>

自定义类名（可选） #

如果不想用默认类名，可以通过active-class和exact-active-class属性自定义：

<NuxtLink to="/" active-class="active-link" exact-active-class="exact-active">
  Accueil
</NuxtLink>

然后对应写自定义类的样式即可。

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