NuxtのuseRouteとは？何が嬉しいのか

Nuxtでページを作成する際、現在のURLの情報を取得して動的に処理を変えたい場面は多くあります。例えば、動的ルーティングでURLパラメータを取得したり、クエリパラメータに応じて表示内容を切り替えたりするケースです。
useRoute はこうした「現在のルート情報」を簡単に取得できるコンポーザブルで、Vue Routerのルートオブジェクトをリアクティブに扱えます。これにより、URLの変化に応じて自動的に画面を更新したり、API呼び出しのパラメータに活用したりできるため、開発効率が大幅に向上します。

まず結論：useRouteのポイント

• 現在のルートのパス、パラメータ、クエリ、ハッシュなどをリアクティブに取得できる
• 動的ルーティングのパラメータ（例：/posts/[id]のid）はroute.paramsでアクセス可能
• クエリパラメータはroute.queryで取得できる（例：?page=2など）
• route.fullPathはパス＋クエリ＋ハッシュを含む完全なURLを返すが、SSR時のハッシュの扱いに注意が必要
• ルートのメタ情報や名前、マッチしたルート情報も取得可能で、柔軟なルーティング制御に役立つ

いつ使うべきか？使わない方がよいケースは？

使うべきケース

• 動的ルーティングのパラメータを取得してAPI呼び出しや表示内容を切り替えたいとき
• クエリパラメータに応じてページの挙動を変えたいとき（例：フィルターやページネーション）
• ルートのメタ情報を参照して認証や権限チェックを行いたいとき
• ルート名やマッチ情報を使って条件分岐やナビゲーション制御をしたいとき

使わない方がよいケース

• ルート情報が不要な単純なコンポーネントやUIパーツでは使わないほうがシンプル
• ルートの変更を監視して副作用を起こす場合は、watchやwatchEffectでの監視を適切に行う必要があるため、安易に使うとパフォーマンスに影響が出ることも
• SSR時にハッシュ（URLフラグメント）を使った処理はハイドレーションの不整合を招くため注意が必要

実務でよくあるユースケースとサンプルコード

1. 動的パラメータを使ったAPI呼び出し

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

<template>
  <article>
    <h1>{{ post.title }}</h1>
    <p>{{ post.content }}</p>
  </article>
</template>

動的ルート/posts/[id]のidを取得し、APIから該当記事を取得しています。

2. クエリパラメータによるページネーション制御

<script setup lang="ts">
const route = useRoute()
const page = Number(route.query.page) || 1
const { data: items } = await useFetch(`/api/items?page=${page}`)
</script>

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
    <p>現在のページ: {{ page }}</p>
  </div>
</template>

クエリパラメータpageを取得し、ページネーションのAPI呼び出しに利用しています。

3. ルートのメタ情報を使った認証チェック

const route = useRoute()

if (route.meta.requiresAuth && !user.isLoggedIn) {
  navigateTo('/login')
}

ルートに設定したmeta.requiresAuthを参照し、認証が必要なページでログインしていなければリダイレクトします。

よくある落とし穴・注意点

SSRとハッシュ（URLフラグメント）の扱い

ブラウザはサーバーにURLのハッシュ部分（#以降）を送信しません。そのため、route.fullPathに含まれるハッシュはクライアント側でのみ存在し、SSR時には存在しません。これが原因でサーバーとクライアントのレンダリング結果が異なり、ハイドレーションエラーが発生することがあります。
ハッシュを使う場合は、クライアント専用の処理に限定するか、ハイドレーションの不整合を避ける工夫が必要です。

ルート情報のリアクティブ性とパフォーマンス

useRouteが返すオブジェクトはリアクティブで、ルートが変わると自動的に更新されます。しかし、これを監視して副作用を起こす場合は、無駄な再レンダリングやAPI呼び出しを防ぐためにwatchの使い方に注意が必要です。
例えば、クエリパラメータの一部だけを監視したい場合は、必要な部分だけを監視対象にするなどの工夫が求められます。

動的パラメータの存在チェック

動的ルートのパラメータは必ず存在するとは限りません。例えば、ページ遷移の途中や初期化時にroute.paramsが空の場合もあるため、API呼び出し前にパラメータの存在チェックを行うことが安全です。

まとめ

NuxtのuseRouteは現在のルート情報を簡単に取得できる強力なコンポーザブルです。動的ルーティングやクエリパラメータの活用、ルートメタ情報の参照など、幅広い用途で使えます。
ただし、SSR時のハッシュの扱いやリアクティブ性によるパフォーマンス面の注意点もあるため、実務ではこれらを理解した上で適切に使うことが重要です。
正しく使いこなせば、Nuxtアプリのルーティング制御や動的表示がより柔軟かつ効率的になります。