useRoute · Nuxtコンポーザブル

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

例

次の例では、動的なページパラメータ - 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: 現在のルートロケーションに到達する前にアクセスしようとしたルートロケーション

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

https://router.vuejs.org/api/#RouteLocationNormalizedLoadedで詳細を読む。

useResponseHeader

サーバーレスポンスヘッダーを設定するには、useResponseHeaderを使用します。

useRouteAnnouncer

このコンポーザブルは、ページタイトルの変更を監視し、それに応じてアナウンサーメッセージを更新します。