Question

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

NuxtLink

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

<NuxtLink> 是 <RouterLink> 的替换组件，它会智能地判断链接是内部链接还是外部链接，并根据可用的优化（预取、默认属性等）进行相应的呈现。

示例

基本用法

• to：来自 Vue Router 的任何 URL 或 路由位置对象
• 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> 默认值。

components/MyNuxtLink.ts

export default defineNuxtLink({
  componentName: 'MyNuxtLink',
  /* 见下面的签名了解更多 */
})

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

案例演示：stackblitz 上试炼

defineNuxtLink签名

ts

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，它将被忽略。

案例演示：examples > routing > nuxt-link