<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を使用すると、リンクはVue RouterのRouterLinkではなくaタグとしてレンダリングされます。

<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://nuxt.dokyumento.jp">
    Nuxt website
  </NuxtLink>
  <!-- <a href="https://nuxt.dokyumento.jp" 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：任意のURLまたはVue Routerのルートロケーションオブジェクト
• 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：リンクをVue RouterのRouterLinkではなくaタグとしてレンダリングすることを強制します。
• 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: プリフェッチされたリンクに適用されるデフォルトクラスです。