导航

NuxtLink

页面间导航组件，基于 Vue Router 的 <RouterLink>，增加了预取、外部链接检测等功能。

<template>
  <!-- 内部链接 -->
  <NuxtLink to="/about">关于</NuxtLink>

  <!-- 动态链接 -->
  <NuxtLink :to="`/user/${id}`">用户</NuxtLink>

  <!-- 对象形式 -->
  <NuxtLink :to="{ name: 'user-id', params: { id: 1 } }">用户</NuxtLink>

  <!-- 外部链接 -->
  <NuxtLink to="https://nuxt.com" external>官网</NuxtLink>

  <!-- 禁用预取 -->
  <NuxtLink to="/heavy" no-prefetch>重页面</NuxtLink>

  <!-- 新窗口打开 -->
  <NuxtLink to="/report" target="_blank">报告</NuxtLink>
</template>

Props

Prop	类型	默认值	说明
to	string | object	-	目标路由（必填）
href	string	-	to 的别名
external	boolean	自动检测	是否外部链接
target	string	-	_blank、_self 等
rel	string	-	链接关系（如 noopener）
noRel	boolean	false	不加 rel 属性
prefetch	boolean	true	是否预取目标页面
noPrefetch	boolean	false	禁用预取
activeClass	string	-	激活时的 CSS class
exactActiveClass	string	-	精确匹配时的 CSS class

自动检测外部链接

NuxtLink 会自动判断链接是否为外部链接：

<template>
  <!-- 自动检测为外部链接 -->
  <NuxtLink to="https://example.com">外部</NuxtLink>

  <!-- 以 // 开头也视为外部 -->
  <NuxtLink to="//cdn.example.com">CDN</NuxtLink>

  <!-- 需要手动指定 external 的场景 -->
  <NuxtLink to="/api/redirect" external>API 重定向</NuxtLink>
</template>

TIP

外部链接会渲染为 <a> 标签且不经过 Vue Router 内部链接使用 <router-link> 实现 SPA 导航

预取行为

预取是 NuxtLink 最重要的性能优化功能：

行为	说明
默认启用	链接进入视口时自动预取目标页面
监测方式	使用 IntersectionObserver 监测链接可见性
预取内容	目标页面的 JS 组件和数据
外部链接	不预取

<template>
  <!-- 全局禁用预取（nuxt.config.ts） -->
  <!-- routerOptions: { prefetchLinks: false } -->

  <!-- 单个链接禁用预取 -->
  <NuxtLink to="/heavy-page" no-prefetch>重页面</NuxtLink>

  <!-- 单个链接启用预取（全局禁用时） -->
  <NuxtLink to="/important" prefetch>重要页面</NuxtLink>
</template>

激活状态样式

<template>
  <!-- 自定义激活样式 -->
  <NuxtLink
    to="/dashboard"
    active-class="text-blue-500"
    exact-active-class="font-bold text-blue-600"
  >
    Dashboard
  </NuxtLink>
</template>

<style>
/* 也可以用 CSS 属性选择器 */
a.router-link-active {
  color: blue;
}
a.router-link-exact-active {
  font-weight: bold;
}
</style>

TIP

active-class 在路由部分匹配时生效（如 /dashboard/settings 也会激活 /dashboard 链接） exact-active-class 仅在精确匹配时生效

与 <a> 标签的对比

特性	<NuxtLink>	<a>
内部导航	SPA 路由跳转（无刷新）	整页刷新
外部链接	自动渲染为 <a>	始终为 <a>
预取	✅ 支持	❌
激活状态	✅ 自动检测	❌
SEO	两者等效	两者等效

INFO

️ 项目内部页面必须使用 <NuxtLink> 而非 <a> 标签 否则会触发整页刷新，失去 SPA 体验