<NuxtLink>

內部路由

在這個範例中，我們使用 <NuxtLink> 元件來連結到應用程式的另一個頁面。

<template>
  <NuxtLink to="/about">
    About page
  </NuxtLink>
  <!-- <a href="/about">...</a> (+Vue Router & prefetching) -->
</template>

將參數傳遞給動態路由

在這個範例中，我們傳遞 id 參數以連結到路由 ~/pages/posts/[id].vue。

<template>
  <NuxtLink :to="{ name: 'posts-id', params: { id: 123 } }">
    Post 123
  </NuxtLink>
</template>

處理 404 錯誤

當使用 <NuxtLink> 連結 /public 目錄中的檔案或指向同一網域上的不同應用程式時，您應該使用 external 屬性。

使用 external 會強制連結渲染為 a 標籤，而不是 Vue Router 的 RouterLink。

<template>
  <NuxtLink to="/the-important-report.pdf" external>
    Download Report
  </NuxtLink>
  <!-- <a href="/the-important-report.pdf"></a> -->
</template>

當使用絕對 URL 以及提供 target 屬性時，預設會套用外部邏輯。

外部路由

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

<template>
  <NuxtLink to="https://nuxtjs.org">
    Nuxt website
  </NuxtLink>
  <!-- <a href="https://nuxtjs.org" rel="noopener noreferrer">...</a> -->
</template>

target 和 rel 屬性

預設情況下，noopener noreferrer 的 rel 屬性會套用至絕對連結和在新分頁中開啟的連結。

• noopener 解決了舊版瀏覽器中的安全性錯誤。
• noreferrer 不會將 Referer 標頭傳送至連結的網站，從而提高使用者的隱私。

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

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

<template>
  <NuxtLink to="https://twitter.com/nuxt_js" target="_blank">
    Nuxt Twitter
  </NuxtLink>
  <!-- <a href="https://twitter.com/nuxt_js" target="_blank" rel="noopener noreferrer">...</a> -->

  <NuxtLink to="https://discord.nuxtjs.org" target="_blank" rel="noopener">
    Nuxt Discord
  </NuxtLink>
  <!-- <a href="https://discord.nuxtjs.org" target="_blank" rel="noopener">...</a> -->

  <NuxtLink to="https://github.com/nuxt" no-rel>
    Nuxt GitHub
  </NuxtLink>
  <!-- <a href="https://github.com/nuxt">...</a> -->

  <NuxtLink to="/contact" target="_blank">
    Contact page opens in another tab
  </NuxtLink>
  <!-- <a href="/contact" target="_blank" rel="noopener noreferrer">...</a> -->
</template>

屬性

RouterLink

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

• to：來自 Vue Router 的任何 URL 或路由位置物件
• custom：<NuxtLink> 是否應該將其內容包裝在 <a> 元素中。它允許完全控制連結的渲染方式以及點擊時的導覽方式。其作用與 Vue Router 的 custom 屬性相同
• exactActiveClass：要套用在精確作用中連結上的類別。其作用與內部連結上 Vue Router 的 exact-active-class 屬性相同。預設為 Vue Router 的預設值 "router-link-exact-active"）
• replace：其作用與內部連結上 Vue Router 的 replace 屬性相同
• ariaCurrentValue：要套用在精確作用中連結上的 aria-current 屬性值。其作用與內部連結上 Vue Router 的 aria-current-value 屬性相同
• activeClass：要套用在作用中連結上的類別。其作用與內部連結上 Vue Router 的 active-class 屬性相同。預設為 Vue Router 的預設值（"router-link-active"）

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> 的預設值

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'
      }
    }
  }
})

自訂連結元件

您可以使用 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：套用在啟用中連結的預設類別。作用方式與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：套用至已預先載入連結的預設類別。