我第一次接触这个标签，我都不知道是干嘛的，哈哈哈哈，就是他长得有点像routerLink，所以我就去查了一下！哎！！！真是一样的，哈哈哈哈，至少做的事情是一样的！这就通透啦~

简单来说这个东西就是一个切换路由的东西。

<template>
  <div>
    <h1>Home page</h1>
    <nuxt-link to="/about">关于</nuxt-link>
  </div>
</template>

这样点击关于这俩字的时候就会跳转到/about这个页面。

要禁用链接页面的预获取，可以使用no-prefetch

<n-link to="/about" no-prefetch>About page not pre-fetched</n-link>

我自己也写了一段代码，可以直接看效果！

<template>
  <div class="container">
    <h2 class="title">储存容量</h2>
    <div class="button-group">
      <NuxtLink
        v-for="size in storageOptions"
        :key="size.value"
        :to="size.value"
        class="button"
        :class="{ active: isActive(size.value) }"
      >
        {{ size.text }}
      </NuxtLink>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { useRoute } from 'vue-router';

const route = useRoute();

const storageOptions = [
  { text: '128GB', value: '128gb' },
  { text: '256GB', value: '256gb' },
  { text: '512GB', value: '512gb' },
];

const currentStorage = computed(() => {
  const storageParam = route.params.storage;
  if (Array.isArray(storageParam)) {
    return storageParam[0] || '';
  }
  return storageParam || '';
});

const isActive = (value: string) => {
  return currentStorage.value.toLowerCase() === value.toLowerCase();
};
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  text-align: center;
}

.title {
  margin-bottom: 20px;
  font-size: 1.5em;
}

.button-group {
  display: flex;
  gap: 10px;
}

.button {
  padding: 10px 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  text-decoration: none;
  color: #333;
  background-color: #f9f9f9;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
}

.button:hover {
  background-color: #e0e0e0;
}

.button.active {
  background-color: #007bff;
  color: white;
  border-color: #007bff;
}
</style>