Nuxt3 中如何给链接添加选中状态

在Nuxt3的开发中，给链接添加选中状态是一项常见且实用的功能。它可以提升用户体验，让用户清楚地知道当前所处的页面或选中的链接。下面将详细介绍如何在Nuxt3中实现这一功能。

我们需要了解Nuxt3中的路由系统。Nuxt3基于Vue Router构建了强大的路由功能。当用户在应用中导航时，路由会发生变化，我们可以利用这个特性来确定当前的路由路径，并据此给相应的链接添加选中状态。

在Nuxt3项目中，我们可以在组件中通过 useRoute 函数获取当前的路由信息。例如，在导航栏组件中，我们可以这样获取当前路由：

<template>
  <nav>
    <ul>
      <li :class="{ active: isActive('/') }"><a href="/">首页</a></li>
      <li :class="{ active: isActive('/about') }"><a href="/about">关于我们</a></li>
      <li :class="{ active: isActive('/contact') }"><a href="/contact">联系我们</a></li>
    </ul>
  </nav>
</template>

<script setup>
import { useRoute } from 'vue-router';

const route = useRoute();

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

<style>
.active {
  font-weight: bold;
  color: blue;
}
</style>

在上述代码中，我们定义了一个 isActive 函数，它接受一个路径参数，并将其与当前路由的路径进行比较。如果匹配，则返回 true，相应的链接就会添加 active 类，从而显示为选中状态。

我们还可以使用Vue Router的 router-link 组件来创建链接。router-link 组件提供了一些内置的属性和事件，可以更方便地处理链接的选中状态。例如：

<router-link to="/" :class="{ active: $route.path === '/' }">首页</router-link>

通过以上方法，我们可以在Nuxt3中轻松地给链接添加选中状态，让用户在导航时能够清晰地了解当前所处的位置，提高应用的易用性和用户体验。合理的选中状态样式设计也能提升应用的视觉效果，使其更加专业和美观。