链接

使用

Link 组件是 <NuxtLink> 的包装器，通过 custom 属性提供了一些额外的属性。

• inactive-class 属性用于设置链接处于非活动状态时的类，active-class 用于活动状态。
• exact 属性用于在链接处于活动状态且路由与当前路由完全相同的情况下，使用 active-class 进行样式设置。
• exact-query 和 exact-hash 属性用于在链接处于活动状态且查询或哈希与当前查询或哈希完全相同的情况下，使用 active-class 进行样式设置。

背后的动机是提供与 Nuxt 2 / Vue 2 中的 NuxtLink 相同的 API。您可以在 Vue Router 从 Vue 2 迁移 指南中了解更多信息。

<template>
  <ULink
    to="/components/link"
    active-class="text-primary"
    inactive-class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200"
  >
    Link
  </ULink>
</template>

它还在提供 to 属性时渲染一个 <a> 标签，否则默认渲染一个 <button> 标签。默认行为可以使用 as 属性进行自定义。

它在 按钮、下拉菜单 和 垂直导航 组件中被使用。

智能感知

如果您使用的是 VSCode 并且希望获得 active-class 和 inactive-class 类的自动完成，您可以将以下设置添加到您的 .vscode/settings.json 中。

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

属性