例

次の例では、動的ページパラメータ - 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: 現在のルート位置にたどり着く前にアクセスしようとしたルートの位置