<NuxtLink>
<NuxtLink>
是 Vue Router 的 <RouterLink>
组件和 HTML 的 <a>
标签的直接替代品。它智能地判断链接是 内部 还是 外部,并根据可用的优化(预提取、默认属性等)进行相应呈现。内部路由
在这个例子中,我们使用 <NuxtLink>
组件链接到应用程序的另一个页面。
<template>
<NuxtLink to="/about">关于页面</NuxtLink>
</template>
<!-- (Vue Router 和智能预提取) -->
<a href="/about">关于页面</a>
向动态路由传递参数
在这个例子中,我们传递 id
参数以链接到路由 ~/pages/posts/[id].vue
。
<template>
<NuxtLink :to="{ name: 'posts-id', params: { id: 123 } }">
文章 123
</NuxtLink>
</template>
<a href="/posts/123">文章 123</a>
处理静态文件和跨应用链接
默认情况下,<NuxtLink>
在相对路由上使用 Vue Router 的客户端导航。当链接到 /public
目录中的静态文件或同一域名上托管的另一个应用程序时,可能会导致意外的 404 错误,因为它们不是客户端路由的一部分。在这种情况下,您可以在 <NuxtLink>
中使用 external
属性来绕过 Vue Router 的内部路由机制。
external
属性明确指示链接为外部链接。<NuxtLink>
将作为标准 HTML <a>
标签呈现链接。这确保链接行为正确,绕过 Vue Router 的逻辑,直接指向资源。
链接到静态文件
对于 /public
目录中的静态文件,如 PDF 或图像,请使用 external
属性以确保链接正确解析。
<template>
<NuxtLink to="/example-report.pdf" external>
下载报告
</NuxtLink>
</template>
链接到跨应用 URL
当指向同一域名上的其他应用时,使用 external
属性确保正确的行为。
<template>
<NuxtLink to="/another-app" external>
转到另一个应用
</NuxtLink>
</template>
使用 external
属性或依赖自动处理确保正确导航,避免意外的路由问题,并改善与静态资源或跨应用场景的兼容性。
外部路由
在这个例子中,我们使用 <NuxtLink>
组件链接到一个网站。
<template>
<NuxtLink to="https://nuxtjs.org">
Nuxt 网站
</NuxtLink>
<!-- <a href="https://nuxtjs.org" rel="noopener noreferrer">...</a> -->
</template>
rel
和 noRel
属性
对于具有 target
属性或绝对链接(例如,以 http://
,https://
或 //
开头的链接),默认应用 rel
属性为 noopener noreferrer
。
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">关于页面</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>关于页面未预提取</NuxtLink>
<NuxtLink to="/about" :prefetch="false">关于页面未预提取</NuxtLink>
自定义预提取触发器
在 v3.13.0
后,我们现在支持自定义预提取触发器。您可以使用 prefetchOn
属性来控制何时预提取链接。
<template>
<NuxtLink prefetch-on="visibility">
这将在变为可见时预提取(默认)
</NuxtLink>
<NuxtLink prefetch-on="interaction">
这将在悬停或获得焦点时预提取
</NuxtLink>
</template>
visibility
: 当链接在视口中变为可见时进行预提取。使用 Intersection Observer API 监控元素与视口的相交。当元素滚动到视野中时触发预提取。interaction
: 当链接被悬停或聚焦时进行预提取。这种方法监听pointerenter
和focus
事件,当用户表明有意与之交互时,主动预提取资源。
您还可以使用对象配置 prefetchOn
:
<template>
<NuxtLink :prefetch-on="{ interaction: true }">
这将在悬停或获得焦点时预提取
</NuxtLink>
</template>
您可能不希望同时启用两者!
<template>
<NuxtLink :prefetch-on="{ visibility: true, interaction: true }">
这将在悬停/聚焦时或在变为可见时预提取
</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
: 任何 URL 或来自 Vue Router 的 路由位置对象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
: 启用时将在视口内预提取链接的中间件、布局和有效载荷(使用 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/
目录中。export default defineNuxtConfig({
experimental: {
defaults: {
nuxtLink: {
// 默认值
componentName: 'NuxtLink',
externalRelAttribute: 'noopener noreferrer',
activeClass: 'router-link-active',
exactActiveClass: 'router-link-exact-active',
prefetchedClass: undefined, // 可以是任何有效的字符串类名
trailingSlash: undefined // 可以是 'append' 或 'remove'
prefetch: true,
prefetchOn: { visibility: true }
}
}
}
})
自定义链接组件
您可以通过使用 defineNuxtLink
创建自己的链接组件来覆盖 <NuxtLink>
的默认值。
export default defineNuxtLink({
componentName: 'MyNuxtLink',
/* 参见下面的签名 */
})
然后,您可以像往常一样使用 <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
: 对默认应用哪些预提取策略的 granular 控制。prefetchedClass
: 应用于已预提取的链接的默认类。