Link 组件是<NuxtLink>的包装，使用了自定义prop。它提供了一些额外的 prop：
inactive-class prop 用于设置链接不活跃时的类名，active-class 用于设置链接活跃时的类名。exact prop 用于在链接活跃且路由与当前路由完全相同时，使用 active-class 进行样式设置。exact-query 和 exact-hash prop 用于在链接活跃且查询或哈希与当前查询或哈希完全相同时，使用 active-class 进行样式设置。exact-query="partial" 在链接活跃且查询部分匹配当前查询时，使用 active-class 进行样式设置。这样做的目的是为了提供与 Nuxt 2 / Vue 2 中 NuxtLink 相同的 API。您可以在 Vue Router 的从 Vue 2 迁移指南中阅读更多相关信息。
Link 组件在提供了 to prop 时渲染一个 <a> 标签，否则渲染一个 <button> 标签。您可以使用 as prop 更改备用标签。
<template>
<ULink as="button">Link</ULink>
</template>
to prop 来检查渲染的 HTML。默认情况下，链接具有默认的活跃和不活跃样式，请查看#主题部分。
<template>
<ULink to="/docs/components/link">Link</ULink>
</template>
to prop 以查看活跃和不活跃状态。您可以通过使用 raw prop 并使用 class、active-class 和 inactive-class 提供您自己的样式来覆盖此行为。
<template>
<ULink raw to="/docs/components/link" active-class="font-bold" inactive-class="text-muted">Link</ULink>
</template>
如果您正在使用 VSCode 并希望获得 active-class 和 inactive-class 的类名自动补全，您可以将以下设置添加到您的 .vscode/settings.json 中：
{
"tailwindCSS.classAttributes": [
"active-class",
"inactive-class"
]
}
| 属性 | 默认值 | 类型 |
|---|---|---|
as |
此组件在不是链接时应呈现的元素或组件。 | |
type |
|
当不是链接时的按钮类型。 |
disabled |
| |
active |
|
强制链接处于活动状态，独立于当前路由。 |
精确匹配 |
仅当当前路由完全匹配时才激活。 | |
精确查询 |
允许控制当前路由查询如何将链接设置为活跃。 | |
精确哈希 |
仅当当前路由哈希完全匹配时才激活。 | |
不活跃类 |
当链接不活跃时应用的类。 | |
原始 |
当 | |
过渡到 | 点击时链接应导航到的路由位置。
| |
href |
| |
外部链接 |
强制将链接视为外部（true）或内部（false）。这有助于处理边缘情况。 | |
target |
在何处显示链接的 URL，作为浏览上下文的名称。 | |
rel |
应用于链接的 rel 属性值。对于外部链接，默认为 "noopener noreferrer"。 | |
无 rel |
如果设置为 true，则不会向链接添加 rel 属性。 | |
预取类 |
应用于已预取的链接的类。 | |
预取 |
启用后，将预取视口中链接的中间件、布局和有效负载。 | |
预取时机 |
允许控制何时预取链接。默认情况下，预取仅在可见时触发。 | |
不预取 |
禁用 | |
活跃类 |
链接活跃时应用的类 | |
精确活跃类 |
当链接精确活跃时应用的类 | |
ariaCurrentValue |
|
当链接精确活跃时，传递给 |
视图过渡 |
如果支持，将 | |
替换 |
调用 |
| 插槽 | 类型 |
|---|---|
default |
|
export default defineAppConfig({
ui: {
link: {
base: 'focus-visible:outline-primary',
variants: {
active: {
true: 'text-primary',
false: 'text-muted'
},
disabled: {
true: 'cursor-not-allowed opacity-75'
}
},
compoundVariants: [
{
active: false,
disabled: false,
class: [
'hover:text-default',
'transition-colors'
]
}
]
}
}
})
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
ui: {
link: {
base: 'focus-visible:outline-primary',
variants: {
active: {
true: 'text-primary',
false: 'text-muted'
},
disabled: {
true: 'cursor-not-allowed opacity-75'
}
},
compoundVariants: [
{
active: false,
disabled: false,
class: [
'hover:text-default',
'transition-colors'
]
}
]
}
}
})
]
})