useRoute コンポーザブルは、vue-router の同名のコンポーザブルをラップしており、Nuxt アプリケーションで現在のルートにアクセスするためのものです。

主な違いは、Nuxt ではページの内容がナビゲーション後に変更された 後にのみ ルートが更新されることを保証する点です。 対照的に、vue-router バージョンはルートを 即座に 更新するため、例えばルートメタデータに依存するテンプレートの異なる部分間で同期の問題が発生する可能性があります。

例

次の例では、動的ページパラメータ - slug - を URL の一部として使用して useFetch を介して API を呼び出します。

<script setup lang="ts">
const route = useRoute()
const { data: mountain } = await useFetch(`/api/mountains/${route.params.slug}`)
</script>

<template>
  <div>
    <h1>{{ mountain.title }}</h1>
    <p>{{ mountain.description }}</p>
  </div>
</template>

ルートクエリパラメータ（例えば /test?example=true のパスの example）にアクセスする必要がある場合は、useRoute().params の代わりに useRoute().query を使用できます。

API

動的パラメータやクエリパラメータ以外にも、useRoute() は現在のルートに関連する以下の計算済みリファレンスを提供します：

• fullPath: パス、クエリ、ハッシュを含む現在のルートに関連付けられたエンコードされた URL
• hash: # で始まる URL のデコードされたハッシュセクション
• query: ルートクエリパラメータにアクセス
• matched: 現在のルート位置に一致する正規化されたルートの配列
• meta: レコードに添付されたカスタムデータ
• name: ルートレコードのユニークな名前
• path: URL のエンコードされたパス名セクション
• redirectedFrom: 現在のルート位置にたどり着く前にアクセスしようとしたルート位置

よくある落とし穴

ルート同期の問題

ページナビゲーション中の同期の問題を避けるために、vue-router からではなく Nuxt の useRoute() コンポーザブルを使用することが重要です。 vue-router から直接 useRoute をインポートすると、Nuxt の実装をバイパスしてしまいます。

// ❌ `vue-router` から `useRoute` を使用しないでください
// @errors: 2300
import { useRoute } from 'vue-router'
// ✅ Nuxt の `useRoute` コンポーザブルを使用してください
import { useRoute } from '#app'

ミドルウェアでの useRoute の呼び出し

ミドルウェアで useRoute を使用することは推奨されません。予期しない動作を引き起こす可能性があります。 ミドルウェアには「現在のルート」という概念がありません。 useRoute() コンポーザブルは、Vue コンポーネントのセットアップ関数または Nuxt プラグインでのみ使用するべきです。

route.fullPath に関するハイドレーションの問題

ブラウザはリクエストを行う際に URL フラグメント（例えば #foo）を送信しません。そのため、route.fullPath を使用してテンプレートに影響を与えると、クライアントではフラグメントが含まれるがサーバーでは含まれないため、ハイドレーションの問題を引き起こす可能性があります。