<NuxtLink>

内部路由

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

<template>
  <NuxtLink to="/about">
    关于页面
  </NuxtLink>
  <!-- <a href="/about">...</a> (+Vue Router & prefetching) -->
</template>

外部路由

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

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

target 和 rel 属性

在这个例子中，我们使用 <NuxtLink> 组件配合 target、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">
    联系页面在新标签页中打开
  </NuxtLink>
  <!-- <a href="/contact" target="_blank" rel="noopener noreferrer">...</a> -->
</template>

属性

• to：任意 URL 或 Vue Router 的 路由位置对象
• 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，它将被忽略。