NuxtLink

Nuxt 提供了 NuxtLink 组件来处理应用程序中的各种链接。

`NuxtLink` 是 Vue Router 的 `RouterLink` 组件和 HTML 的 `a` 标签的替代品。
它能智能地确定链接是内部链接还是外部链接，并根据可用的优化（预加载、默认属性等）进行渲染。

内部路由

在这个例子中，我们使用 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 属性 的工作方式相同