Link
用法
Link 组件是围绕<NuxtLink>使用自定义的prop。它提供了一些额外的 prop
inactive-classprop 用于在链接不活动时设置类，active-class用于在活动时设置。exactprop 用于在链接处于活动状态且路由与当前路由完全相同时使用active-class进行样式设置。exact-query和exact-hashprops 用于在链接处于活动状态且查询或哈希与当前查询或哈希完全相同时使用active-class进行样式设置。- 使用
exact-query="partial"在链接处于活动状态且查询部分匹配当前查询时使用active-class进行样式设置。
- 使用
这样做的目的是为了提供与 Nuxt 2 / Vue 2 中 NuxtLink 相同的 API。您可以在 Vue Router从 Vue 2 迁移指南中阅读更多相关信息。
标签
当提供了 to prop 时，Link 组件会渲染一个 <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"
]
}
API
属性
| 属性 | 默认值 | 类型 |
|---|---|---|
as |
|
此组件在不是链接时应呈现的元素或组件。 |
type |
|
当不是链接时，按钮的类型。 |
disabled |
| |
active |
|
强制链接处于活动状态，独立于当前路由。 |
exact |
仅当当前路由完全匹配时才处于活动状态。 | |
exactQuery |
允许控制当前路由查询如何将链接设置为活动状态。 | |
exactHash |
仅当当前路由哈希完全匹配时才处于活动状态。 | |
inactiveClass |
链接不活动时应用的类。 | |
raw |
当 | |
过渡到 |
点击时链接应导航到的路由位置。
| |
href |
| |
external |
强制将链接视为外部（true）或内部（false）。这有助于处理边缘情况 | |
target |
在何处显示链接的 URL，作为浏览上下文的名称。 | |
rel |
应用于链接的 rel 属性值。外部链接默认为 "noopener noreferrer"。 | |
noRel |
如果设置为 true，则不会向链接添加 rel 属性 | |
prefetchedClass |
应用于已预取链接的类。 | |
prefetch |
启用后将预取视口中链接的中间件、布局和有效载荷。 | |
prefetchOn |
允许控制何时预取链接。默认情况下，预取仅在可见时触发。 | |
noPrefetch |
禁用 | |
activeClass |
链接活动时应用的类 | |
exactActiveClass |
链接完全活动时应用的类 | |
ariaCurrentValue |
|
当链接完全活动时，传递给 |
viewTransition |
如果支持，将 | |
replace |
调用 |
插槽
| 插槽 | 类型 |
|---|---|
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'
]
}
]
}
}
})
]
})