`<NuxtLink>` - 链接组件

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

＜NuxtLink＞是 Vue Router 的＜RouterLink＞组件和 HTML 的＜a＞标签的直接替代品。它智能地确定链接是内部的还是外部的，并自动优化，如外部链接会自动添加rel、target等属性。

外部链接

使用＜NuxtLink＞组件链接到外部网站：

<template>
  <!-- <a href="https://lessjs.com" rel="noopener noreferrer">...</a> -->
  <NuxtLink to="https://lessjs.com">
    Less JS
  </NuxtLink>
</template>

内部链接

使用＜NuxtLink＞组件链接到应用程序的另一个页面。

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

target 和 rel 属性

＜NuxtLink＞与target、rel和noRelprops一起使用。

<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：任何 URL 或来自 Vue Router 的路由对象

href：to的一个别名。如果和to一起使用，href将被忽略

target：应用于链接的目标属性值

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

noRel：如果设置为 "true"，则没有rel属性将被添加到链接上。

activeClass：适用于链接激活时。与 Vue Router 的active-class在内部链接上的作用相同。默认为 Vue Router 的默认值是router-link-active。

exactActiveClass：链接精准激活时，应用于渲染的<a>的 class。与Vue Router在内部链接上的exact-active-class的作用相同。默认为 Vue Router 的默认值是router-link-exact-active"。

replace：与内部链接上的 Vue Router 的replace相同。

ariaCurrentValue：当链接激活时，传递给属性aria-current的值。与内部链接上的 Vue Router 的aria相同。

external：强制将链接视为外部（true）或内部（false）。

custom：＜NuxtLink＞是否应将其内容包装在＜a＞元素中。它允许完全控制链接的呈现方式以及单击时导航的工作方式。工作原理与 Vue Router 的custom相同。

可以覆盖默认值，如果要更改默认值，请参见覆盖默认值。

自定义`<NuxtLink>`

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

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

可以像往常一样使用＜MyNuxtLink/＞组件和新的默认值。

在线示例

defineNuxtLink类型：

defineNuxtLink({
  componentName?: string;
  externalRelAttribute?: string;
  activeClass?: string;
  exactActiveClass?: string;
}) => Component

componentName：定义的＜NuxtLink＞组件的名称。

externalRelAttribute：应用于外部链接的默认rel属性值。默认为noopener-noreferrer。将其设置为''以禁用。

activeClass：适用于链接激活时。与 Vue Router 的active-class在内部链接上的作用相同。默认为 Vue Router 的默认值是router-link-active。

查看更多＜NuxtLink＞在线示例

<NuxtLink> - 链接组件 #

外部链接 #

内部链接 #

target 和 rel 属性 #