<NuxtLink>
Nuxt 提供了 <NuxtLink> 组件来处理应用程序中的任何类型的链接。
<NuxtLink> 可以直接替代 Vue Router 的 <RouterLink> 组件和 HTML 的 <a> 标签。它会智能地判断链接是内部链接还是外部链接，并根据可用的优化（预取、默认属性等）进行相应的渲染。内部路由
在此示例中，我们使用 <NuxtLink> 组件链接到应用程序的另一个页面。
pages/index.vue
<template>
<NuxtLink to="/about">
About page
</NuxtLink>
<!-- <a href="/about">...</a> (+Vue Router & prefetching) -->
</template>
向动态路由传递参数
在此示例中，我们将 id 参数传递给路由 ~/pages/posts/[id].vue。
pages/index.vue
<template>
<NuxtLink :to="{ name: 'posts-id', params: { id: 123 } }">
Post 123
</NuxtLink>
</template>
请查看 Nuxt DevTools 中的 Pages 面板，以查看路由名称及其可能接受的参数。
处理 404 错误
当使用 <NuxtLink> 链接到 /public 目录中的文件或指向同一域上的不同应用程序时，应使用 external 属性。
使用 external 会强制将链接渲染为 a 标签，而不是 Vue Router 的 RouterLink。
pages/index.vue
<template>
<NuxtLink to="/the-important-report.pdf" external>
Download Report
</NuxtLink>
<!-- <a href="/the-important-report.pdf"></a> -->
</template>
当使用绝对 URL 和提供 target 属性时，默认应用外部逻辑。
外部路由
在此示例中，我们使用 <NuxtLink> 组件链接到网站。
app.vue
<template>
<NuxtLink to="https://nuxtjs.org">
Nuxt website
</NuxtLink>
<!-- <a href="https://nuxtjs.org" rel="noopener noreferrer">...</a> -->
</template>
target 和 rel 属性
默认情况下，noopener noreferrer 的 rel 属性应用于绝对链接和在新标签页中打开的链接。
noopener解决了旧版浏览器中的一个安全漏洞。noreferrer通过不将Referer标头发送到链接的站点来提高用户的隐私。
这些默认值对 SEO 没有负面影响，并且被认为是最佳实践。
当需要覆盖此行为时，可以使用 rel 和 noRel 属性。
app.vue
<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：应用于已预取的链接的类。
锚点
target：应用于链接的target属性值rel：应用于链接的rel属性值。对于外部链接，默认为"noopener noreferrer"。
默认值可以被覆盖，如果要更改它们，请参阅覆盖默认值。
覆盖默认值
在 Nuxt 配置中
您可以在 nuxt.config 中覆盖一些 <NuxtLink> 默认值
这些选项将来可能会移动到其他位置，例如移动到
app.config 或 app/ 目录中。nuxt.config.ts
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> 默认值。
components/MyNuxtLink.ts
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：应用于已预取的链接的默认类。
在文档 > 示例 > 路由 > 页面中阅读和编辑实时示例。