Link

GitHub

是一个包裹并提供额外的属性。

用法

Link 组件是<NuxtLink>的包裹，使用了custom属性。它提供了一些额外的属性

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 迁移指南中阅读更多内容。

它被以下组件使用：Breadcrumb、Button、ContextMenu、DropdownMenu 和 NavigationMenu 组件。

样式

默认情况下，链接具有默认的激活和非激活样式，请查看#theme部分。

<template>
  <ULink to="/components/link">Link</ULink>
</template>

尝试改变 to 属性来查看激活和非激活状态。

你可以通过使用 raw 属性并使用 class、active-class 和 inactive-class 提供你自己的样式来覆盖此行为。

activeClass

inactiveClass

<template>
  <ULink raw to="/components/link" active-class="font-bold" inactive-class="text-muted">Link</ULink>
</template>

智能感知

如果你正在使用 VSCode 并希望获得 active-class 和 inactive-class 类名的自动补全，你可以将以下设置添加到你的 .vscode/settings.json 文件中

.vscode/settings.json

{
  "tailwindCSS.classAttributes": [
    "active-class",
    "inactive-class"
  ]
}

API

属性 (Props)

属性 (Prop)	默认值	类型
`as`	`'button'`	`any` 当不是链接时，此组件应渲染为的元素或组件。
`type`	`'button'`	`"reset" \| "submit" \| "button"` 当不是链接时，按钮的类型。
`disabled`		`boolean`
`active`	`undefined`	`boolean` 强制链接激活，独立于当前路由。
`exact`		`boolean` 仅当当前路由是精确匹配时才激活。
`exactQuery`		`boolean \| "partial"` 允许控制当前路由查询如何设置链接为激活状态。
`exactHash`		`boolean` 仅当当前路由哈希是精确匹配时才激活。
`inactiveClass`	`''`	`string` 链接不激活时应用的类名。
`raw`		`boolean` 当 `true` 时，仅应用来自 `class`、`activeClass` 和 `inactiveClass` 的样式。
`to`		`string \| RouteLocationAsRelativeGeneric \| RouteLocationAsPathGeneric` 点击时链接应导航到的路由位置。
`href`		`string \| RouteLocationAsRelativeGeneric \| RouteLocationAsPathGeneric` `to` 的别名。如果与 `to` 一起使用，`href` 将被忽略
`external`		`boolean` 强制将链接视为外部链接（true）或内部链接（false）。这有助于处理边缘情况
`target`		`null \| string & {} \| "_blank" \| "_parent" \| "_self" \| "_top"` 链接的 URL 在何处显示，作为浏览上下文的名称。
`rel`		`null \| string & {} \| "noopener" \| "noreferrer" \| "nofollow" \| "sponsored" \| "ugc"` 应用于链接的 rel 属性值。对于外部链接，默认为 "noopener noreferrer"。
`noRel`		`boolean` 如果设置为 true，则不会向链接添加 rel 属性
`prefetchedClass`		`string` 应用于已预取链接的类名。
`prefetch`		`boolean` 启用后，将预取视口中链接的中间件、布局和 payload。
`prefetchOn`		`"visibility" \| "interaction" \| Partial<{ visibility: boolean; interaction: boolean; }>` 允许控制何时预取链接。默认情况下，仅在可见时触发预取。
`noPrefetch`		`boolean` 用于禁用 `prefetch` 属性的应急方案。
`replace`		`boolean` 调用 `router.replace` 而不是 `router.push`。
`activeClass`	`''`	`string` 链接激活时应用的类名
`exactActiveClass`		`string` 链接精确激活时应用的类名
`ariaCurrentValue`	`'page'`	`"date" \| "time" \| "step" \| "page" \| "location" \| "true" \| "false"` 链接精确激活时传递给 `aria-current` 属性的值。
`viewTransition`		`boolean` 如果支持，将 `router.push()` 返回的 promise 传递给 `document.startViewTransition()`。

插槽 (Slots)

插槽 (Slot)	类型
`default`	`{ active: boolean; }`

主题

app.config.ts

export default defineAppConfig({
  ui: {
    link: {
      base: 'focus-visible:outline-primary',
      variants: {
        active: {
          true: 'text-primary',
          false: [
            'text-muted hover:text-default',
            'transition-colors'
          ]
        },
        disabled: {
          true: 'cursor-not-allowed opacity-75'
        }
      }
    }
  }
})

vite.config.ts

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 hover:text-default',
                'transition-colors'
              ]
            },
            disabled: {
              true: 'cursor-not-allowed opacity-75'
            }
          }
        }
      }
    })
  ]
})

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import uiPro from '@nuxt/ui-pro/vite'

export default defineConfig({
  plugins: [
    vue(),
    uiPro({
      ui: {
        link: {
          base: 'focus-visible:outline-primary',
          variants: {
            active: {
              true: 'text-primary',
              false: [
                'text-muted hover:text-default',
                'transition-colors'
              ]
            },
            disabled: {
              true: 'cursor-not-allowed opacity-75'
            }
          }
        }
      }
    })
  ]
})

Kbd

用于显示键盘按键的 kbd 元素。

Modal

一个对话窗口，可用于显示消息或请求用户输入。