<NuxtLink>

ソース
Nuxtは、アプリケーション内のあらゆる種類のリンクを処理するために＜NuxtLink＞コンポーネントを提供します。
＜NuxtLink＞は、Vue Routerの＜RouterLink＞コンポーネントとHTMLの＜a＞タグの両方のドロップイン置換です。リンクが「内部」か「外部」かをインテリジェントに判断し、利用可能な最適化（プリフェッチ、デフォルト属性など）とともにそれに応じてレンダリングします。

内部ルーティング

この例では、＜NuxtLink＞コンポーネントを使用して、アプリケーションの別のページにリンクします。

<template>
  <NuxtLink to="/about">About page</NuxtLink>
</template>

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

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

<template>
  <NuxtLink :to="{ name: 'posts-id', params: { id: 123 } }">
    Post 123
  </NuxtLink>
</template>
Nuxt DevToolsのPagesパネルを確認して、ルート名とそのパラメータを確認してください。
＜code＞to＜/code＞プロップにオブジェクトを渡すと、＜NuxtLink＞はVue Routerのクエリパラメータの処理を継承します。キーと値は自動的にエンコードされるため、＜code＞encodeURI＜/code＞や＜code＞encodeURIComponent＜/code＞を手動で呼び出す必要はありません。

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

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

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

静的ファイルへのリンク

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

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

クロスアプリURLへのリンク

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

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

＜code＞external＜/code＞プロップの使用、または自動処理への依存により、適切なナビゲーションが保証され、予期しないルーティングの問題が回避され、静的リソースまたはクロスアプリシナリオとの互換性が向上します。

外部ルーティング

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

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

relとnoRel属性

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

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

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

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

app/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>

＜code＞noRel＜/code＞プロップは、絶対リンクに追加されるデフォルトの＜code＞rel＜/code＞属性を防ぐために使用できます。

app/app.vue
<template>
  <NuxtLink
    to="https://github.com/nuxt"
    no-rel
  >
    Nuxt GitHub
  </NuxtLink>
  <!-- <a href="https://github.com/nuxt">...</a> -->
</template>
＜code＞noRel＜/code＞と＜code＞rel＜/code＞は一緒に使用できません。＜code＞rel＜/code＞は無視されます。

リンクのプリフェッチ

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

app/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＞でカスタムプリフェッチトリガーをサポートするようになりました。＜code＞prefetchOn＜/code＞プロップを使用して、いつリンクをプリフェッチするかを制御できます。

<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」：リンクがビューポートに表示されたときにプリフェッチします。ビューポートとの要素の交差を＜code＞Intersection Observer API＜/code＞を使用して監視します。要素がビューにスクロールされたときにプリフェッチがトリガーされます。Intersection Observer API。プリフェッチは、要素がビューにスクロールされたときにトリガーされます。
  • 「interaction」：リンクがホバーまたはフォーカスされたときにプリフェッチします。このアプローチは、＜code＞pointerenter＜/code＞および＜code＞focus＜/code＞イベントをリッスンし、ユーザーがインタラクションの意図を示したときにプロアクティブにリソースをプリフェッチします。

オブジェクトを使用して＜code＞prefetchOn＜/code＞を構成することもできます。

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

この構成では、要素がビューポートに入ったときに監視し、＜code＞pointerenter＜/code＞および＜code＞focus＜/code＞イベントもリッスンします。両方のトリガーが異なる条件で同じリソースをプリフェッチする可能性があるため、これにより不要なリソース使用量や重複したプリフェッチが発生する可能性があります。

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

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

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

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

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

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

プロップス

RouterLink

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

  • ＜code＞to＜/code＞：任意のURLまたはVue Routerからの＜code＞ルートロケーションオブジェクト＜/code＞。ルートロケーションオブジェクトVue Routerより
  • ＜code＞custom＜/code＞：＜NuxtLink＞がコンテンツを＜a＞要素でラップするかどうか。これにより、リンクのレンダリング方法とクリック時のナビゲーション方法を完全に制御できます。Vue Routerの＜code＞custom＜/code＞プロップと同じように機能します。Vue Routerの「custom」プロップ
  • ＜code＞exactActiveClass＜/code＞：厳密にアクティブなリンクに適用されるクラス。Vue Routerの＜code＞exactActiveClass＜/code＞プロップと同じように機能します。内部リンクに適用されます。Vue Routerのデフォルト（＜code＞"router-link-exact-active"＜/code＞）がデフォルトです。Vue Routerの「exactActiveClass」プロップ内部リンクで。Vue Routerのデフォルト（＜code＞"router-link-exact-active"＜/code＞）がデフォルトです。
  • ＜code＞activeClass＜/code＞：アクティブなリンクに適用されるクラス。Vue Routerの＜code＞activeClass＜/code＞プロップと同じように機能します。内部リンクに適用されます。Vue Routerのデフォルト（＜code＞"router-link-active"＜/code＞）がデフォルトです。Vue Routerの「activeClass」プロップ内部リンクで。Vue Routerのデフォルト（＜code＞"router-link-active"＜/code＞）がデフォルトです。
  • ＜code＞replace＜/code＞：Vue Routerの＜code＞replace＜/code＞プロップと同じように内部リンクで機能します。Vue Routerの「replace」プロップ内部リンクで
  • ＜code＞ariaCurrentValue＜/code＞：厳密にアクティブなリンクに適用される＜code＞aria-current＜/code＞属性の値。Vue Routerの＜code＞ariaCurrentValue＜/code＞プロップと同じように機能します。Vue Routerの「ariaCurrentValue」プロップ内部リンクで

NuxtLink

  • ＜code＞href＜/code＞：＜code＞to＜/code＞のエイリアス。＜code＞to＜/code＞とともに使用された場合、＜code＞href＜/code＞は無視されます。
  • ＜code＞noRel＜/code＞：＜code＞true＜/code＞に設定されている場合、外部リンクに＜code＞rel＜/code＞属性は追加されません。
  • ＜code＞external＜/code＞：リンクをVue Routerの＜code＞RouterLink＜/code＞ではなく、＜a＞タグとしてレンダリングすることを強制します。
  • ＜code＞prefetch＜/code＞：有効になっている場合、ビューポート内のリンクのミドルウェア、レイアウト、およびペイロード（＜a href="/docs/4.x/api/nuxt-config#crossoriginprefetch" class="text-primary border-b border-transparent hover:border-primary font-medium focus-visible:outline-primary [&>code]:border-dashed hover:[&>code]:border-primary hover:[&>code]:text-primary transition-colors [&>code]:transition-colors">payloadExtractionを使用する場合）をプリフェッチします。実験的な＜a href="/docs/4.x/api/nuxt-config#crossoriginprefetch" class="text-primary border-b border-transparent hover:border-primary font-medium focus-visible:outline-primary [&>code]:border-dashed hover:[&>code]:border-primary hover:[&>code]:text-primary transition-colors [&>code]:transition-colors">crossOriginPrefetch構成によって使用されます。
  • ＜code＞prefetchOn＜/code＞：リンクをいつプリフェッチするかをカスタム制御できます。可能なオプションは、「interaction」と「visibility」（デフォルト）です。オブジェクトを渡して完全に制御することもできます。例：＜code＞{ interaction: true, visibility: true }＜/code＞。このプロップは、＜code＞prefetch＜/code＞が有効（デフォルト）で、＜code＞noPrefetch＜/code＞が設定されていない場合のみ使用されます。
  • ＜code＞noPrefetch＜/code＞：プリフェッチを無効にします。
  • ＜code＞prefetchedClass＜/code＞：プリフェッチされたリンクに適用されるクラス。

アンカー

  • ＜code＞target＜/code＞：リンクに適用される＜code＞target＜/code＞属性の値。
  • ＜code＞rel＜/code＞：リンクに適用される＜code＞rel＜/code＞属性の値。外部リンクのデフォルトは＜code＞"noopener noreferrer"＜/code＞です。
デフォルトは上書き可能で、＜a href="/docs/4.x/api/components/nuxt-link#overwriting-defaults" class="text-primary border-b border-transparent hover:border-primary font-medium focus-visible:outline-primary [&>code]:border-dashed hover:[&>code]:border-primary hover:[&>code]:text-primary transition-colors [&>code]:transition-colors">デフォルトの上書きを参照して変更してください。

デフォルトの上書き

Nuxt Configで

一部の＜NuxtLink＞のデフォルトは、＜code＞nuxt.config＜/code＞で上書きできます。

これらのオプションは、将来的に＜code＞app.config＜/code＞や＜code＞app/＜/code＞ディレクトリなどに移動される可能性があります。
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 },
      },
    },
  },
})

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

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

app/components/MyNuxtLink.ts
export default defineNuxtLink({
  componentName: 'MyNuxtLink',
  /* see signature below for more */
})

その後、＜code＞＜MyNuxtLink /＞＜/code＞コンポーネントを、新しいデフォルトとともに通常どおり使用できます。

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 {}
  • ＜code＞componentName＜/code＞：コンポーネントの名前。デフォルトは＜code＞NuxtLink＜/code＞です。
  • ＜code＞externalRelAttribute＜/code＞：外部リンクに適用されるデフォルトの＜code＞rel＜/code＞属性値。デフォルトは＜code＞"noopener noreferrer"＜/code＞です。無効にするには＜code＞""＜/code＞に設定します。
  • ＜code＞activeClass＜/code＞：アクティブなリンクに適用されるデフォルトのクラス。Vue Routerの＜code＞linkActiveClass＜/code＞オプションと同じように機能します。Vue Routerのデフォルト（＜code＞"router-link-active"＜/code＞）がデフォルトです。Vue Routerの「linkActiveClass」オプション。Vue Routerのデフォルト（＜code＞"router-link-active"＜/code＞）がデフォルトです。
  • ＜code＞exactActiveClass＜/code＞：厳密にアクティブなリンクに適用されるデフォルトのクラス。Vue Routerの＜code＞linkExactActiveClass＜/code＞オプションと同じように機能します。Vue Routerのデフォルト（＜code＞"router-link-exact-active"＜/code＞）がデフォルトです。Vue Routerの「linkExactActiveClass」オプション。Vue Routerのデフォルト（＜code＞"router-link-exact-active"＜/code＞）がデフォルトです。
  • ＜code＞trailingSlash＜/code＞：＜code＞href＜/code＞に末尾のスラッシュを追加または削除するオプション。未設定または有効な値（＜code＞append＜/code＞または＜code＞remove＜/code＞）と一致しない場合、無視されます。
  • ＜code＞prefetch＜/code＞：デフォルトでリンクをプリフェッチするかどうか。
  • ＜code＞prefetchOn＜/code＞：デフォルトで適用するプリフェッチ戦略を細かく制御できます。
  • ＜code＞prefetchedClass＜/code＞：プリフェッチされたリンクに適用されるデフォルトのクラス。
Docs > 4 X > Examples > Routing > Pagesでライブの例を読んで編集してください。