链接组件 <NuxtLink>

NuxtLink

Nuxt 提供 <NuxtLink> 组件来处理应用程序中的任何类型的链接。

<NuxtLink> 是 <RouterLink> 的替换组件，它会智能地判断链接是内部链接还是外部链接，并根据可用的优化(预取、默认属性等)进行相应的呈现。

示例

基本用法

在这个例子中，我们使用 <NuxtLink> 组件链接到一个网站。

<template>
  <NuxtLink to="https://nuxtjs.org">
    Nuxt website
  </NuxtLink>
  <!-- <a href="https://nuxtjs.org" rel="noopener noreferrer">...</a> -->
</template>

内部路由

在此示例中，我们使用 <NuxtLink> 组件链接到应用程序的另一个页面。

<template>
  <NuxtLink to="/about">
    About page
  </NuxtLink>
  <!-- <a href="/about">...</a> (+Vue Router & prefetching) -->
</template>

target和rel属性

在此示例中，我们使用带有target、rel和noRel道具的<NuxtLink>。

<template>
  <NuxtLink to="https://twitter.com/nuxt_js" target="_blank">
    Nuxt Twitter
  </NuxtLink>
  <!-- <a href="https://twitter.com/nuxt_js" target="_blank" rel="noopener noreferrer">...</a> -->

  <NuxtLink to="https://discord.nuxtjs.org" target="_blank" rel="noopener">
    Nuxt Discord
  </NuxtLink>
  <!-- <a href="https://discord.nuxtjs.org" target="_blank" rel="noopener">...</a> -->

  <NuxtLink to="https://github.com/nuxt" no-rel>
    Nuxt GitHub
  </NuxtLink>
  <!-- <a href="https://github.com/nuxt">...</a> -->

  <NuxtLink to="/contact" target="_blank">
    Contact page opens in another tab
  </NuxtLink>
  <!-- <a href="/contact" target="_blank" rel="noopener noreferrer">...</a> -->
</template>

Props

• to：来自 Vue Router 的任何 URL 或 路由位置对象
• href：to 的别名。 如果与 to 一起使用，href 将被忽略
• target：要应用于链接的“target”属性值
• rel：应用于链接的 rel 属性值。 外部链接默认为“noopener noreferrer”。
• noRel：如果设置为“true”，则不会向链接添加“rel”属性
• activeClass：应用于活动链接的类。 在内部链接上与 Vue Router 的 active-class 道具 相同。 默认为 Vue Router 的默认值("router-link-active")
• exactActiveClass：应用于精确活动链接的类。 在内部链接上与 Vue Router 的 exact-active-class 道具 一样工作。 默认为 Vue Router 的默认"router-link-exact-active")
• replace：在内部链接上与 Vue Router 的 replace 道具 相同
• ariaCurrentValue：应用于确切活动链接的 aria-current 属性值。 在内部链接上与 Vue Router 的 aria-current-value 属性 一样工作
• external：强制将链接视为外部(true)或内部(false)。 这有助于处理边缘情况
• prefetch 和 noPrefetch：是否为进入视口的链接启用预取资源。
• prefetchedClass：应用于已预取链接的类。
• custom：<NuxtLink> 是否应将其内容包装在 <a> 元素中。 它允许完全控制链接的呈现方式以及单击时导航的工作方式。 与 Vue Router 的 custom 道具 相同

覆盖默认值

您可以使用 defineNuxtLink 创建自己的链接组件来覆盖 <NuxtLink> 默认值。

export default defineNuxtLink({
  componentName: 'MyNuxtLink',
  /* 见下面的签名了解更多 */
})

然后，您可以像往常一样使用带有新默认值的 <MyNuxtLink /> 组件。

defineNuxtLink签名

defineNuxtLink({
  componentName?: string;
  externalRelAttribute?: string;
  activeClass?: string;
  exactActiveClass?: string;
  prefetchedClass?: string;
  trailingSlash?: 'append' | 'remove'
}) => Component

• componentName：定义的<NuxtLink>组件的名称。
• externalRelAttribute：应用于外部链接的默认rel属性值。 默认为noopener noreferrer。 将其设置为 "" 以禁用
• activeClass：应用于活动链接的默认类。 与 Vue Router 的 linkActiveClass 选项 相同。 默认为 Vue Router 的默认值("router-link-active")
• exactActiveClass：应用于精确活动链接的默认类。 与 Vue Router 的 linkExactActiveClass 选项 相同。 默认为 Vue Router 的默认值("router-link-exact-active")
• prefetchedClass：应用于已预取链接的默认类。
• trailingSlash：在 href 中添加或删除尾部斜杠的选项。 如果未设置或不匹配有效值 append 或 remove，它将被忽略。