当前位置：首页 > article >正文

学习NuxtLink标签

article 2025/9/6 10:03:45

我第一次接触这个标签，我都不知道是干嘛的，哈哈哈哈，就是他长得有点像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"><NuxtLinkv-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>