<NuxtLink>

内部路由

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

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

将参数传递给动态路由

在此示例中，我们将 id 参数传递给链接到路由 ~/pages/posts/[id].vue。

<template>
  <NuxtLink :to="{ name: 'posts-id', params: { id: 123 } }">
    Post 123
  </NuxtLink>
</template>

处理 404 错误

当使用 <NuxtLink> 链接到 /public 目录中的文件或指向同一域上的不同应用程序时，应使用 external 属性。

使用 external 会强制将链接呈现为 a 标签，而不是 Vue Router RouterLink。

<template>
  <NuxtLink to="/the-important-report.pdf" external>
    Download Report
  </NuxtLink>
  <!-- <a href="/the-important-report.pdf"></a> -->
</template>

当使用绝对 URL 以及提供 target 属性时，默认会应用外部逻辑。

外部路由

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

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

target 和 rel 属性

默认情况下，会将 rel 属性设置为 noopener noreferrer 应用于绝对链接和在新选项卡中打开的链接。

• noopener 解决了旧版浏览器中的一个 安全漏洞。
• noreferrer 通过不将 Referer 标头发送到链接的站点来提高用户的隐私性。

这些默认设置不会对 SEO 产生负面影响，并且被认为是 最佳实践。

当您需要覆盖此行为时，可以使用 rel 和 noRel 属性。

<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>

属性

RouterLink

如果不使用 external，<NuxtLink> 支持所有 Vue Router 的 RouterLink 属性

• to：任何 URL 或来自 Vue Router 的 路由位置对象
• custom：<NuxtLink> 是否应将其内容包装在 <a> 元素中。它允许完全控制链接的呈现方式以及单击时导航的方式。与 Vue Router 的 custom 属性 的工作方式相同。
• exactActiveClass：在精确激活的链接上应用的类。与 Vue Router 的 exact-active-class 属性 在内部链接上的工作方式相同。默认为 Vue Router 的默认值（"router-link-exact-active"）。
• replace：与 Vue Router 的 replace 属性 在内部链接上的工作方式相同。
• ariaCurrentValue：要应用于精确激活的链接的 aria-current 属性值。与 Vue Router 的 aria-current-value 属性 在内部链接上的工作方式相同。
• activeClass：要应用于活动链接的类。与 Vue Router 的 active-class 属性 在内部链接上的工作方式相同。默认为 Vue Router 的默认值（"router-link-active"）。

NuxtLink

• href：to 的别名。如果与 to 一起使用，则会忽略 href。
• noRel：如果设置为 true，则不会向链接添加 rel 属性。
• external：强制将链接呈现为 a 标签，而不是 Vue Router RouterLink。
• prefetch：启用后，将预取视口内链接的中介件、布局和有效负载（当使用 payloadExtraction 时）。由实验性 crossOriginPrefetch 配置使用。
• prefetchOn：允许自定义控制何时预取链接。可能的选项包括 interaction 和 visibility（默认）。您还可以传递一个对象以进行完全控制，例如：{ interaction: true, visibility: true }。此属性仅在启用 prefetch（默认）且未设置 noPrefetch 时使用。
• noPrefetch：禁用预取。
• prefetchedClass：要应用于已预取链接的类。

锚点

• target：要应用于链接的 target 属性值。
• rel：要应用于链接的 rel 属性值。对于外部链接，默认为 "noopener noreferrer"。

覆盖默认值

在 Nuxt 配置中

您可以在 nuxt.config 中覆盖一些 <NuxtLink> 默认值。

export default defineNuxtConfig({
  experimental: {
    defaults: {
      nuxtLink: {
        // default values
        componentName: 'NuxtLink',
        externalRelAttribute: 'noopener noreferrer',
        activeClass: 'router-link-active',
        exactActiveClass: 'router-link-exact-active',
        prefetchedClass: undefined, // can be any valid string class name
        trailingSlash: undefined // can be 'append' or 'remove'
      }
    }
  }
})

自定义链接组件

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

export default defineNuxtLink({
  componentName: 'MyNuxtLink',
  /* see signature below for more */
})

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

defineNuxtLink 签名

interface NuxtLinkOptions {
  componentName?: string;
  externalRelAttribute?: string;
  activeClass?: string;
  exactActiveClass?: string;
  trailingSlash?: 'append' | 'remove'
  prefetch?: boolean
  prefetchedClass?: string
  prefetchOn?: Partial<{
    visibility: boolean
    interaction: boolean
  }>
}
function defineNuxtLink(options: NuxtLinkOptions): 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"）。
• trailingSlash：一个选项，用于在 href 中添加或删除尾部斜杠。如果未设置或与有效值 append 或 remove 不匹配，则将被忽略。
• prefetch：是否默认预取链接。
• prefetchOn：对默认应用的预取策略进行细粒度控制。
• prefetchedClass：应用于已预取链接的默认类。