NuxtLink 導航

NuxtLink 是 Nuxt 中用於頁面導航的核心元件，它取代了標準的 <a> 標籤，提供了 SPA 般的無刷新切換體驗與智慧型預取 (Prefetching) 功能。

核心概念

<NuxtLink> 是一個智慧型元件。它會根據 to 屬性的內容，自動決定最佳的渲染方式。

Smart Decision Logic

Starts with /

Vue Router

SPA Navigation (No Refresh)

Starts with http

Standard Navigation

內部導航

對於內部連結，Nuxt 會攔截點擊事件，透過 JavaScript 更新 URL 並渲染新頁面，而不會重新載入整頁。這提供了如原生 App 般的流暢體驗。

<template>
  <nav>
    <!-- 字串語法 -->
    <NuxtLink to="/">首頁</NuxtLink>
    
    <!-- 物件語法 (推薦) -->
    <NuxtLink :to="{ name: 'users-id', params: { id: 123 } }">
      使用者 123
    </NuxtLink>
    
    <!-- 帶查詢參數 -->
    <NuxtLink :to="{ path: '/search', query: { q: 'nuxt' } }">
      搜尋 Nuxt
    </NuxtLink>
  </nav>
</template>

外部連結

當偵測到外部連結時，它會自動退化為標準的 <a> 標籤，並自動加上 rel="noopener noreferrer" 以確保安全性（當使用 target="_blank" 時）。

<template>
  <!-- 自動處理為 <a href=... target="_blank" rel="noopener noreferrer"> -->
  <NuxtLink to="https://nuxt.com" target="_blank">
    Nuxt 官網
  </NuxtLink>
</template>

樣式與狀態

NuxtLink 會自動為當前活躍的連結加上 CSS class。

router-link-active

當路由包含連結路徑時觸發 (模糊比對)。
例如：在 /docs/intro 時，/docs 也會亮起。

router-link-exact-active

當路由完全等於連結路徑時觸發 (精確比對)。

<style scoped>
.router-link-active {
  color: #10b981; /* emerald-500 */
  font-weight: bold;
}
</style>

預取機制

為了極致的效能，NuxtLink 預設會在連結進入視口 (Viewport) 時，自動在背景預先下載目標頁面的 JavaScript 程式碼 (Payload)。這使得點擊後的頁面切換幾乎是瞬間完成的。

如何關閉？

如果你有大量的連結（例如列表頁），可能會產生過多的請求。你可以設定 prefetch="false" 來關閉此功能。

<template>
  <NuxtLink to="/heavy-page" :prefetch="false">
    不預取的連結
  </NuxtLink>
</template>