useRoute

ソース
useRoute コンポーザブルは、現在のルートを返します。
Vue コンポーネントのテンプレート内では、$route を使用してルートにアクセスできます。

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

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

例

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

~/pages/[slug].vue
<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 の実装がバイパスされます。

// ❌ do not use `useRoute` from `vue-router`
import { useRoute } from 'vue-router'
// ✅ use Nuxt's `useRoute` composable
import { useRoute } from '#app'

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

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

これは、useRoute() を内部的に使用するすべてのコンポーザブルにも当てはまります。
ミドルウェアでのルートへのアクセスについて詳しくは、ミドルウェアのセクションを参照してください。

route.fullPath とハイドレーションの問題

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

詳しくは、https://router.vuejs.org/api/type-aliases/RouteLocationNormalizedLoaded.html を参照してください。