透過 100 多個技巧的集合來學習 Nuxt！
56.4K

<NuxtLink>

原始碼
Nuxt 提供 <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>
查看 Nuxt DevTools 中的「頁面」面板，以查看路由名稱及其可能採用的參數。

處理靜態檔案和跨應用程式連結

預設情況下，<NuxtLink> 對於相對路由使用 Vue Router 的用戶端導航。當連結到 /public 目錄中的靜態檔案或託管在相同網域上的另一個應用程式時，可能會導致意外的 404 錯誤，因為它們不是用戶端路由的一部分。在這種情況下，您可以將 external 屬性與 <NuxtLink> 搭配使用，以繞過 Vue Router 的內部路由機制。

external 屬性明確指出連結是外部的。<NuxtLink> 會將連結渲染為標準 HTML <a> 標籤。這可確保連結行為正確，繞過 Vue Router 的邏輯並直接指向資源。

連結到靜態檔案

對於 /public 目錄中的靜態檔案，例如 PDF 或影像，請使用 external 屬性以確保連結正確解析。

pages/index.vue
<template>
  <NuxtLink to="/example-report.pdf" external>
    Download Report
  </NuxtLink>
</template>

連結到跨應用程式 URL

當指向相同網域上的不同應用程式時，使用 external 屬性可確保正確的行為。

pages/index.vue
<template>
  <NuxtLink to="/another-app" external>
    Go to Another App
  </NuxtLink>
</template>

使用 external 屬性或依賴自動處理可確保正確的導航，避免意外的路由問題，並提高與靜態資源或跨應用程式情境的相容性。

外部路由

在此範例中，我們使用 <NuxtLink> 元件連結到網站。

app.vue
<template>
  <NuxtLink to="https://nuxt.dev.org.tw">
    Nuxt website
  </NuxtLink>
  <!-- <a href="https://nuxt.dev.org.tw" rel="noopener noreferrer">...</a> -->
</template>

rel 和 noRel 屬性

預設情況下，rel 屬性 noopener noreferrer 會套用至具有 target 屬性的連結或絕對連結（例如，以 http://、https:// 或 // 開頭的連結）。

  • noopener 解決了舊版瀏覽器中的安全性錯誤。
  • noreferrer 透過不將 Referer 標頭傳送至連結的網站，來改善使用者的隱私。

這些預設值對 SEO 沒有負面影響，並被視為最佳實務。

當您需要覆寫此行為時，可以使用 rel 或 noRel 屬性。

app.vue
<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 屬性新增至絕對連結。

app.vue
<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 連線，則會跳過預先載入。

pages/index.vue
<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 啟用跨來源預先載入。

nuxt.config.ts
export default defineNuxtConfig({
  experimental: {
    crossOriginPrefetch: true,
  },
})

全域停用預先載入

也可以為您的應用程式全域啟用/停用所有連結的預先載入。

nuxt.config.ts
export default defineNuxtConfig({
  experimental: {
    defaults: {
      nuxtLink: {
        prefetch: false,
      },
    },
  },
})

屬性

RouterLink

當不使用 external 時，<NuxtLink> 支援所有 Vue Router 的 RouterLink 屬性

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'
        prefetch: true,
        prefetchOn: { visibility: true } 
      }
    }
  }
})

自訂連結元件

您可以透過使用 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：要應用於已預先載入連結的預設類別。
在 文件 > 範例 > 路由 > 頁面 中閱讀和編輯即時範例。

<NuxtLayout>

Nuxt 提供 <NuxtLayout> 元件以在頁面和錯誤頁面上顯示版面配置。

<NuxtLoadingIndicator>

在頁面導航之間顯示進度條。