<NuxtLink>

内部路由

在这个例子中，我们使用 <NuxtLink> 组件来链接应用中的另一个页面。

<template>
  <NuxtLink to="/about">
    关于页面
  </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>

处理 404s

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

使用 external 会强制链接以 a 标签的形式渲染，而不是 Vue Router 的 RouterLink。

<template>
  <NuxtLink to="/the-important-report.pdf" external>
    下载报告
  </NuxtLink>
  <!-- <a href="/the-important-report.pdf"></a> -->
</template>

外部逻辑默认应用于绝对 URL 和带有 target 属性的链接。

外部路由

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

<template>
  <NuxtLink to="https://nuxtjs.org">
    Nuxt 网站
  </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: 应用于已预取的链接的类。

Anchor

• 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: 用于应用于已预取链接的默认类。