链接组件是<NuxtLink>的封装，使用自定义属性。它提供了几个额外属性
inactive-class 属性用于设置链接不活跃时的类名，active-class 用于活跃时。exact 属性用于当链接活跃且路由与当前路由完全相同时，使用 active-class 样式。exact-query 和 exact-hash 属性用于当链接活跃且查询或哈希与当前查询或哈希完全相同时，使用 active-class 样式。exact-query="partial" 用于当链接活跃且查询部分匹配当前查询时，使用 active-class 样式。这样做的目的是为了提供与 Nuxt 2 / Vue 2 中 NuxtLink 相同的 API。你可以在 Vue Router从 Vue 2 迁移指南中阅读更多内容。
当提供了 to 属性时，Link 组件会渲染一个 <a> 标签，否则它会渲染一个 <button> 标签。你可以使用 as 属性来更改回退标签。
<template>
<ULink as="button">Link</ULink>
</template>
to 属性来检查渲染的 HTML。默认情况下，链接具有默认的活跃和不活跃样式，请查看#主题部分。
<template>
<ULink to="/docs/components/link">Link</ULink>
</template>
to 属性以查看活跃和不活跃状态。你可以通过使用 raw 属性并使用 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 | 'button' | any此组件在不是链接时应呈现的元素或组件。 |
type | 'button' | "reset" | "submit" | "button"当不是链接时，按钮的类型。 |
disabled | boolean | |
active | undefined | boolean强制链接处于活动状态，独立于当前路由。 |
exact | boolean仅当当前路由完全匹配时才处于活跃状态。 | |
exactQuery | boolean | "partial"允许控制当前路由查询如何将链接设置为活跃。 | |
exactHash | boolean仅当当前路由哈希完全匹配时才处于活跃状态。 | |
inactiveClass | string链接不活跃时应用的类名。 | |
raw | boolean当 | |
过渡到 | string | RouteLocationAsRelativeGeneric | RouteLocationAsPathGeneric点击时链接应导航到的路由位置。
| |
href | string | RouteLocationAsRelativeGeneric | RouteLocationAsPathGeneric
| |
external | boolean强制将链接视为外部链接 (true) 或内部链接 (false)。这有助于处理边缘情况 | |
target | null | string & {} | "_blank" | "_parent" | "_self" | "_top"在何处显示链接的 URL，作为浏览上下文的名称。 | |
rel | null | "noopener" | "noreferrer" | "nofollow" | "sponsored" | "ugc" | string & {}应用于链接的 rel 属性值。外部链接默认为 "noopener noreferrer"。 | |
noRel | boolean如果设置为 true，则链接不会添加 rel 属性 | |
prefetchedClass | string应用于已预取链接的类名。 | |
prefetch | boolean启用后将预取视口中链接的中间件、布局和有效载荷。 | |
prefetchOn | "visibility" | "interaction" | Partial<{ visibility: boolean; interaction: boolean; }>允许控制何时预取链接。默认情况下，仅在可见时触发预取。 | |
noPrefetch | boolean禁用 | |
trailingSlash | "append" | "remove"用于为该特定链接添加或删除 | |
activeClass | string链接活跃时应用的类名 | |
exactActiveClass | string链接精确活跃时应用的类名 | |
ariaCurrentValue | 'page' | "step" | "page" | "true" | "false" | "location" | "date" | "time"当链接精确活跃时，传递给 |
viewTransition | boolean如果支持，将 | |
replace | boolean调用 | |
name | string | |
autofocus | false | true | "true" | "false" | |
form | string | |
formaction | string | |
formenctype | string | |
formmethod | string | |
formnovalidate | false | true | "true" | "false" | |
formtarget | string | |
referrerpolicy | "" | "no-referrer" | "no-referrer-when-downgrade" | "origin" | "origin-when-cross-origin" | "same-origin" | "strict-origin" | "strict-origin-when-cross-origin" | "unsafe-url" | |
download | any | |
hreflang | string | |
media | string | |
ping | string |
| 插槽 | 类型 |
|---|---|
default | { active: boolean; } |
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'
]
}
]
}
}
})
]
})