Nuxt3 中怎样给选中链接添加高亮状态

在Nuxt3的开发中，为选中的链接添加高亮状态是一项能够提升用户体验的常见需求。它可以让用户清晰地知道当前所处的页面或选中的导航链接，增强页面的可视性和交互性。下面将介绍几种在Nuxt3中实现这一效果的方法。

方法一：使用CSS伪类选择器

CSS的伪类选择器提供了一种简单的方式来为当前选中的链接添加样式。在Nuxt3项目的样式文件中，我们可以使用:active伪类来定义链接被点击时的样式，使用:focus伪类来定义链接获得焦点时的样式。例如：

a:active,
a:focus {
  color: #007bff;
  text-decoration: underline;
}

上述代码会将选中链接的文字颜色设置为蓝色，并添加下划线。

方法二：通过Vue的动态绑定

在Nuxt3中，我们可以利用Vue的动态绑定特性来实现链接的高亮状态。在组件的data中定义一个变量来表示当前选中的链接，然后在链接的class属性上使用动态绑定，根据当前选中的链接来添加或移除高亮样式类。

示例代码如下：

<template>
  <nav>
    <a :class="{ active: isActive('home') }" href="/">Home</a>
    <a :class="{ active: isActive('about') }" href="/about">About</a>
  </nav>
</template>

<script setup>
const route = useRoute();

const isActive = (path) => {
  return route.path === `/${path}`;
};
</script>

<style>
.active {
  color: #007bff;
  text-decoration: underline;
}
</style>

方法三：使用NuxtLink组件

Nuxt3提供了NuxtLink组件来处理页面导航。我们可以利用NuxtLink组件的active-class属性来指定选中链接的样式类。

<template>
  <nav>
    <NuxtLink to="/" active-class="active">Home</NuxtLink>
    <NuxtLink to="/about" active-class="active">About</NuxtLink>
  </nav>
</template>

<style>
.active {
  color: #007bff;
  text-decoration: underline;
}
</style>

通过以上方法，我们可以在Nuxt3中轻松地为选中的链接添加高亮状态，提升页面的用户体验。