内部ルーティング

この例では、アプリケーションの別のページにリンクするために<NuxtLink>コンポーネントを使用します。

<template>
  <NuxtLink to="/about">Aboutページ</NuxtLink>
</template>

動的ルートへのパラメータの渡し方

この例では、idパラメータを渡してルート~/pages/posts/[id].vueにリンクします。

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

静的ファイルとクロスアプリケーションリンクの処理

デフォルトでは、<NuxtLink>は相対ルートに対してVue Routerのクライアントサイドナビゲーションを使用します。/publicディレクトリ内の静的ファイルや同じドメイン上にホストされている別のアプリケーションにリンクする場合、それらはクライアントルートの一部ではないため、予期しない404エラーが発生する可能性があります。このような場合、externalプロップを使用して、Vue Routerの内部ルーティングメカニズムをバイパスできます。

externalプロップはリンクが外部であることを明示的に示します。<NuxtLink>はリンクを標準のHTML <a>タグとしてレンダリングします。これにより、リンクが正しく動作し、Vue Routerのロジックをバイパスしてリソースを直接指すことが保証されます。

静的ファイルへのリンク

/publicディレクトリ内のPDFや画像などの静的ファイルに対しては、externalプロップを使用してリンクが正しく解決されるようにします。

<template>
  <NuxtLink to="/example-report.pdf" external>
    レポートをダウンロード
  </NuxtLink>
</template>

クロスアプリケーションURLへのリンク

同じドメイン上の別のアプリケーションを指す場合、externalプロップを使用することで正しい動作が保証されます。

<template>
  <NuxtLink to="/another-app" external>
    別のアプリへ移動
  </NuxtLink>
</template>

externalプロップを使用するか、自動処理に依存することで、適切なナビゲーションが保証され、予期しないルーティングの問題を回避し、静的リソースやクロスアプリケーションのシナリオとの互換性が向上します。

外部ルーティング

この例では、<NuxtLink>コンポーネントを使用してウェブサイトにリンクします。

<template>
  <NuxtLink to="https://nuxtjs.org">
    Nuxtウェブサイト
  </NuxtLink>
  <!-- <a href="https://nuxtjs.org" rel="noopener noreferrer">...</a> -->
</template>

relとnoRel属性

rel属性のnoopener noreferrerは、target属性を持つリンクや絶対リンク（例：http://、https://、//で始まるリンク）にデフォルトで適用されます。

• noopenerは古いブラウザのセキュリティバグを解決します。
• noreferrerはリンク先サイトにRefererヘッダーを送信しないことでユーザーのプライバシーを向上させます。

これらのデフォルトはSEOに悪影響を与えず、ベストプラクティスとされています。

この動作を上書きする必要がある場合は、relまたはnoRelプロップを使用できます。

<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ページ</NuxtLink>
  <!-- <a href="/about" target="_blank" rel="noopener noreferrer">...</a> -->
</template>

noRelプロップを使用すると、絶対リンクにデフォルトのrel属性が追加されるのを防ぐことができます。

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

プリフェッチリンク

Nuxtは自動的にスマートプリフェッチを含んでいます。つまり、リンクがビューポート内またはスクロール時に表示されると（デフォルトで）、そのページのJavaScriptをプリフェッチし、ユーザーがリンクをクリックしたときにすぐに準備が整うようにします。Nuxtは、ブラウザが忙しくないときにのみリソースをロードし、接続がオフラインの場合や2g接続しかない場合はプリフェッチをスキップします。

<NuxtLink to="/about" no-prefetch>Aboutページはプリフェッチされません</NuxtLink>
<NuxtLink to="/about" :prefetch="false">Aboutページはプリフェッチされません</NuxtLink>

カスタムプリフェッチトリガー

v3.13.0以降、<NuxtLink>のカスタムプリフェッチトリガーをサポートしています。prefetchOnプロップを使用して、リンクをプリフェッチするタイミングを制御できます。

<template>
  <NuxtLink prefetch-on="visibility">
    これは表示されるときにプリフェッチされます（デフォルト）
  </NuxtLink>

  <NuxtLink prefetch-on="interaction">
    これはホバーまたはフォーカスされたときにプリフェッチされます
  </NuxtLink>
</template>

• visibility: リンクがビューポート内に表示されるときにプリフェッチします。要素がビューポートと交差するかどうかをIntersection Observer APIを使用して監視します。要素が表示されるとプリフェッチがトリガーされます。
• interaction: リンクがホバーまたはフォーカスされたときにプリフェッチします。このアプローチはpointerenterとfocusイベントをリッスンし、ユーザーがインタラクションする意図を示したときにリソースを積極的にプリフェッチします。

オブジェクトを使用してprefetchOnを設定することもできます。

<template>
  <NuxtLink :prefetch-on="{ interaction: true }">
    これはホバーまたはフォーカスされたときにプリフェッチされます
  </NuxtLink>
</template>

両方を有効にしたくないかもしれません！

<template>
  <NuxtLink :prefetch-on="{ visibility: true, interaction: true }">
    これはホバー/フォーカスされたとき、または表示されたときにプリフェッチされます
  </NuxtLink>
</template>

この設定は、要素がビューポートに入るときに監視し、pointerenterとfocusイベントもリッスンします。これにより、不要なリソース使用や冗長なプリフェッチが発生する可能性があります。異なる条件で同じリソースをプリフェッチすることがあるためです。

クロスオリジンプリフェッチの有効化

クロスオリジンプリフェッチを有効にするには、nuxt.configでcrossOriginPrefetchオプションを設定します。これにより、Speculation Rules APIを使用してクロスオリジンプリフェッチが有効になります。

export default defineNuxtConfig({
  experimental: {
    crossOriginPrefetch: true,
  },
})

プリフェッチをグローバルに無効化

アプリ全体でプリフェッチを有効/無効にすることも可能です。

export default defineNuxtConfig({
  experimental: {
    defaults: {
      nuxtLink: {
        prefetch: false,
      },
    },
  },
})

プロップ

RouterLink

externalを使用しない場合、<NuxtLink>はVue RouterのすべてのRouterLinkプロップをサポートします。

• to: 任意のURLまたはVue Routerのルートロケーションオブジェクト
• custom: <NuxtLink>がそのコンテンツを<a>要素でラップするかどうか。リンクがレンダリングされる方法とクリックされたときのナビゲーションの動作を完全に制御できます。Vue Routerのcustomプロップと同様に動作します。
• exactActiveClass: 正確にアクティブなリンクに適用するクラス。内部リンクでVue RouterのexactActiveClassプロップと同様に動作します。デフォルトはVue Routerのデフォルト（"router-link-exact-active"）です。
• activeClass: アクティブなリンクに適用するクラス。内部リンクでVue RouterのactiveClassプロップと同様に動作します。デフォルトはVue Routerのデフォルト（"router-link-active"）です。
• replace: 内部リンクでVue Routerのreplaceプロップと同様に動作します。
• ariaCurrentValue: 正確にアクティブなリンクに適用するaria-current属性値。内部リンクでVue RouterのariaCurrentValueプロップと同様に動作します。

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 Configで

nuxt.configで<NuxtLink>のデフォルトを上書きできます。

export default defineNuxtConfig({
  experimental: {
    defaults: {
      nuxtLink: {
        // デフォルト値
        componentName: 'NuxtLink',
        externalRelAttribute: 'noopener noreferrer',
        activeClass: 'router-link-active',
        exactActiveClass: 'router-link-exact-active',
        prefetchedClass: undefined, // 有効な文字列クラス名
        trailingSlash: undefined // 'append'または'remove'が可能
        prefetch: true,
        prefetchOn: { visibility: true } 
      }
    }
  }
})

カスタムリンクコンポーネント

defineNuxtLinkを使用して独自のリンクコンポーネントを作成することで、<NuxtLink>のデフォルトを上書きできます。

export default defineNuxtLink({
  componentName: 'MyNuxtLink',
  /* 以下のシグネチャを参照 */
})

その後、通常のデフォルトで<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: プリフェッチされたリンクに適用するデフォルトのクラス。