Nuxt3导航链接如何实现选中状态

在Nuxt3项目中，导航链接的选中状态可以直观告诉用户当前所处的页面位置，是前端交互中非常基础且重要的功能。Nuxt3基于Vue Router封装了导航相关能力，实现选中状态不需要额外引入复杂依赖，通过内置的组件和配置就能快速完成。

使用内置NuxtLink组件实现基础选中状态

Nuxt3默认的导航组件是<NuxtLink>，它内置了选中状态的相关处理逻辑，会自动给当前路由匹配的链接添加一个默认的激活类名，我们可以通过这个类名来设置选中样式。

首先看基础的静态导航实现示例，假设我们有一个包含首页、关于页、博客页的导航栏：

<template>
  <nav class="nav-bar">
    <!-- NuxtLink默认会根据当前路由自动添加激活类名 -->
    <NuxtLink to="/">首页</NuxtLink>
    <NuxtLink to="/about">关于我们</NuxtLink>
    <NuxtLink to="/blog">博客</NuxtLink>
  </nav>
</template>

<style scoped>
/* 默认激活类名是 router-link-active，也可以自定义 */
.nav-bar a {
  margin-right: 16px;
  color: #333;
  text-decoration: none;
  padding: 8px 12px;
}

/* 选中状态的样式 */
.nav-bar a.router-link-active {
  color: #1677ff;
  font-weight: bold;
  border-bottom: 2px solid #1677ff;
}
</style>

当页面路由切换到/about时，对应的<NuxtLink to="/about">会自动添加router-link-active类名，从而应用我们设置的选中样式。

自定义选中状态的类名

如果不想使用默认的router-link-active类名，或者需要区分精确匹配和非精确匹配的选中状态，可以通过active-class和exact-active-class属性自定义类名。

• active-class：当链接的路由被匹配时（包含子路由匹配）添加的类名
• exact-active-class：只有当链接的路由被精确匹配时（不包含子路由）添加的类名

示例代码如下：

<template>
  <nav class="nav-bar">
    <!-- 自定义非精确匹配的类名 -->
    <NuxtLink 
      to="/blog" 
      active-class="nav-active"
    >
      博客
    </NuxtLink>
    <!-- 自定义精确匹配的类名 -->
    <NuxtLink 
      to="/blog/detail" 
      exact-active-class="nav-exact-active"
    >
      博客详情
    </NuxtLink>
  </nav>
</template>

<style scoped>
.nav-active {
  color: #1677ff;
}

.nav-exact-active {
  color: #ff4d4f;
  font-weight: bold;
}
</style>

动态路由下的选中状态适配

当导航链接指向动态路由时，比如/blog/:id这类路由，默认的匹配逻辑依然生效，只需要保证NuxtLink的to属性值和路由定义匹配即可。如果是需要高亮父级导航的场景，比如访问/blog/123时高亮/blog的导航项，不需要额外处理，因为router-link-active类本身就支持子路由匹配的高亮。

动态路由导航的示例代码：

<template>
  <nav class="nav-bar">
    <NuxtLink to="/blog">博客列表</NuxtLink>
    <!-- 动态路由的链接，访问/blog/1时也会高亮上面的博客列表 -->
    <NuxtLink :to="`/blog/${blogId}`">当前博客</NuxtLink>
  </nav>
</template>

<script setup>
// 假设从接口获取到的博客id
const blogId = ref(1)
</script>

编程式导航的选中状态处理

如果使用编程式导航（比如通过navigateTo方法跳转页面），选中状态依然会自动生效，因为选中状态是基于当前路由判断的，和跳转方式无关。示例代码如下：

<template>
  <div>
    <button @click="goToAbout">跳转到关于页</button>
  </div>
</template>

<script setup>
const goToAbout = () => {
  // 编程式跳转，跳转后对应的NuxtLink会自动添加选中类名
  navigateTo('/about')
}
</script>

全局配置默认选中类名

如果项目中所有导航都需要使用统一的自定义选中类名，不需要在每个NuxtLink上单独配置，可以在Nuxt3的配置文件中全局设置。在nuxt.config.ts中添加以下配置：

// nuxt.config.ts
export default defineNuxtConfig({
  router: {
    options: {
      // 全局设置默认的激活类名
      linkActiveClass: 'global-nav-active',
      // 全局设置默认的精确激活类名
      linkExactActiveClass: 'global-nav-exact-active'
    }
  }
})

配置完成后，所有NuxtLink组件都会默认使用这两个类名作为选中状态的类名，减少重复代码。

Nuxt3导航链接选中状态vue_routeractive_class修改时间：2026-06-23 23:39:47