内部ルーティング

この例では、<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属性

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

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