<NuxtLink>
<NuxtLink> 是 Vue Router 的 <RouterLink> 组件和 HTML 的 <a> 标签的直接替代品。它智能地确定链接是内部的还是外部的，并根据可用的优化（预取，默认属性等）进行渲染。内部路由
在这个例子中，我们使用 <NuxtLink> 组件链接到应用程序的另一个页面。
<template>
<NuxtLink to="/about">About page</NuxtLink>
</template>
将参数传递给动态路由
在这个例子中，我们传递 id 参数以链接到路由 ~/pages/posts/[id].vue。
<template>
<NuxtLink :to="{ name: 'posts-id', params: { id: 123 } }">
Post 123
</NuxtLink>
</template>
处理静态文件和跨应用链接
默认情况下，<NuxtLink> 对相对路由使用 Vue Router 的客户端导航。当链接到 /public 目录中的静态文件或托管在同一域上的另一个应用程序时，可能会导致意外的 404 错误，因为它们不是客户端路由的一部分。在这种情况下，你可以将 external 属性与 <NuxtLink> 一起使用，以绕过 Vue Router 的内部路由机制。
external 属性显式地指示链接是外部的。<NuxtLink> 将链接渲染为标准的 HTML <a> 标签。这确保了链接行为正确，绕过了 Vue Router 的逻辑并直接指向资源。
链接到静态文件
对于 /public 目录中的静态文件，例如 PDF 或图像，请使用 external 属性以确保链接正确解析。
<template>
<NuxtLink to="/example-report.pdf" external>
Download Report
</NuxtLink>
</template>
链接到跨应用 URL
当指向同一域上的不同应用程序时，使用 external 属性可确保正确的行为。
<template>
<NuxtLink to="/another-app" external>
Go to Another App
</NuxtLink>
</template>
使用 external 属性或依赖自动处理可确保正确的导航，避免意外的路由问题，并提高与静态资源或跨应用程序场景的兼容性。
外部路由
在这个例子中，我们使用 <NuxtLink> 组件链接到一个网站。
<template>
<NuxtLink to="https://nuxtjs.org.cn">
Nuxt website
</NuxtLink>
<!-- <a href="https://nuxtjs.org.cn" rel="noopener noreferrer">...</a> -->
</template>
rel 和 noRel 属性
默认情况下，noopener noreferrer 的 rel 属性应用于具有 target 属性或绝对链接（例如，以 http://、https:// 或 // 开头的链接）的链接。
noopener解决了旧浏览器中的安全漏洞。noreferrer通过不向链接站点发送Referer标头来提高用户的隐私。
这些默认值对 SEO 没有负面影响，并且被认为是最佳实践。
当你需要覆盖此行为时，可以使用 rel 或 noRel 属性。
<template>
<NuxtLink to="https://twitter.com/nuxt_js">
Nuxt Twitter
</NuxtLink>
<!-- <a href="https://twitter.com/nuxt_js" rel="noopener noreferrer">...</a> -->
<NuxtLink to="https://discord.nuxtjs.org" rel="noopener">
Nuxt Discord
</NuxtLink>
<!-- <a href="https://discord.nuxtjs.org" rel="noopener">...</a> -->
<NuxtLink to="/about" target="_blank">About page</NuxtLink>
<!-- <a href="/about" target="_blank" rel="noopener noreferrer">...</a> -->
</template>
noRel 属性可用于阻止将默认 rel 属性添加到绝对链接。
<template>
<NuxtLink to="https://github.com/nuxt" no-rel>
Nuxt GitHub
</NuxtLink>
<!-- <a href="https://github.com/nuxt">...</a> -->
</template>
noRel 和 rel 不能一起使用。 rel 将被忽略。预取链接
Nuxt 自动包含智能预取。这意味着它检测链接何时可见（默认情况下），无论是在视口中还是在滚动时，并预取这些页面的 JavaScript，以便在用户单击链接时它们已准备就绪。 Nuxt 仅在浏览器不忙时加载资源，并且如果你的连接离线或只有 2g 连接，则跳过预取。
<NuxtLink to="/about" no-prefetch>About page not pre-fetched</NuxtLink>
<NuxtLink to="/about" :prefetch="false">About page not pre-fetched</NuxtLink>
自定义预取触发器
我们现在在 v3.13.0 之后支持 <NuxtLink> 的自定义预取触发器。你可以使用 prefetchOn 属性来控制何时预取链接。
<template>
<NuxtLink prefetch-on="visibility">
This will prefetch when it becomes visible (default)
</NuxtLink>
<NuxtLink prefetch-on="interaction">
This will prefetch when hovered or when it gains focus
</NuxtLink>
</template>
visibility：当链接在视口中变为可见时预取。 使用 Intersection Observer API 监视元素与视口的交叉。当元素滚动到视图中时，将触发预取。interaction：当链接被悬停或聚焦时预取。 这种方法监听pointerenter和focus事件，在用户表示要交互时主动预取资源。
你还可以使用对象来配置 prefetchOn
<template>
<NuxtLink :prefetch-on="{ interaction: true }">
This will prefetch when hovered or when it gains focus
</NuxtLink>
</template>
你可能不希望同时启用两者！
<template>
<NuxtLink :prefetch-on="{ visibility: true, interaction: true }">
This will prefetch when hovered/focus - or when it becomes visible
</NuxtLink>
</template>
此配置将观察元素何时进入视口，并监听 pointerenter 和 focus 事件。 这可能会导致不必要的资源使用或冗余预取，因为两个触发器都可以在不同条件下预取相同的资源。
启用跨域预取
要启用跨域预取，你可以在你的 nuxt.config 中设置 crossOriginPrefetch 选项。 这将启用使用 Speculation Rules API 的跨域预取。
export default defineNuxtConfig({
experimental: {
crossOriginPrefetch: true,
},
})
全局禁用预取
也可以为你的应用程序全局启用/禁用所有链接的预取。
export default defineNuxtConfig({
experimental: {
defaults: {
nuxtLink: {
prefetch: false,
},
},
},
})
属性
RouterLink
当不使用 external 时，<NuxtLink> 支持所有 Vue Router 的 RouterLink 属性
to：来自 Vue Router 的任何 URL 或 路由位置对象custom：<NuxtLink>是否应将其内容包装在<a>元素中。 它允许完全控制链接的渲染方式以及单击时导航的工作方式。 与 Vue Router 的custom属性 的工作方式相同exactActiveClass：应用于精确活动链接的类。 与内部链接上的 Vue Router 的exactActiveClass属性 的工作方式相同。 默认为 Vue Router 的默认值 ("router-link-exact-active")activeClass：应用于活动链接的类。 与内部链接上的 Vue Router 的activeClass属性 的工作方式相同。 默认为 Vue Router 的默认值 ("router-link-active")replace：与内部链接上的 Vue Router 的replace属性 的工作方式相同ariaCurrentValue：应用于精确活动链接的aria-current属性值。 与内部链接上的 Vue Router 的ariaCurrentValue属性 的工作方式相同
NuxtLink
href：to的别名。 如果与to一起使用，href将被忽略noRel：如果设置为true，则不会向外部链接添加rel属性external：强制链接渲染为<a>标签而不是 Vue Router 的RouterLink。prefetch：启用后，将预加载视口中链接的中间件、布局和 payload（当使用 payloadExtraction 时）。由实验性的 crossOriginPrefetch 配置使用。prefetchOn：允许自定义控制何时预加载链接。可选选项为interaction和visibility（默认）。您也可以传递一个对象以进行完全控制，例如：{ interaction: true, visibility: true }。此 prop 仅在启用prefetch（默认）且未设置noPrefetch时使用。noPrefetch：禁用预加载。prefetchedClass：应用于已预加载链接的 class。
锚点
target：应用于链接的target属性值rel：应用于链接的rel属性值。外部链接默认为"noopener noreferrer"。
覆盖默认值
在 Nuxt Config 中
您可以在 nuxt.config 中覆盖一些 <NuxtLink> 默认值
app.config 或 app/ 目录中。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'
prefetch: true,
prefetchOn: { visibility: true }
}
}
}
})
自定义链接组件
您可以通过使用 defineNuxtLink 创建自己的链接组件来覆盖 <NuxtLink> 默认值。
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：应用于活动链接的默认 class。工作方式与 Vue Router 的linkActiveClass选项 相同。默认为 Vue Router 的默认值 ("router-link-active")exactActiveClass：应用于精确活动链接的默认 class。工作方式与 Vue Router 的linkExactActiveClass选项 相同。默认为 Vue Router 的默认值 ("router-link-exact-active")trailingSlash：用于在href中添加或删除尾部斜杠的选项。如果未设置或与有效值append或remove不匹配，则将被忽略。prefetch：默认是否预加载链接。prefetchOn：细粒度控制默认应用哪些预加载策略。prefetchedClass：应用于已预加载链接的默认 class。