NuxtのuseRouterとは？〜何が嬉しいのか〜

NuxtのuseRouterは、Vue Routerのルーターインスタンスを取得できるコンポーザブルです。これにより、プログラム的にページ遷移を制御したり、ルート情報を取得したりすることが可能になります。
公式ドキュメントでは基本的なAPIが紹介されていますが、実務での具体的な活用方法や注意点については補足が少ないため、本記事ではそれらを丁寧に解説します。

useRouterを使うことで、以下のような課題を解決できます。

• ユーザーの操作に応じた柔軟なページ遷移（例：ボタン押下で前のページに戻る）
• 動的にルートを追加・削除してアプリの拡張性を高める
• ルート情報を取得して条件分岐や表示制御を行う
• ナビゲーションガードを活用して認証や権限管理を実装する

これらはNuxtアプリケーションのUX向上や保守性向上に直結する重要なポイントです。

まず結論：useRouterの要点まとめ

• useRouterはVue Routerのルーターインスタンスを返し、ページ遷移やルート操作が可能
• ルートの追加・削除・存在確認など動的なルーティング管理ができる
• router.push()やrouter.replace()でプログラム的に遷移できるが、NuxtではnavigateToの利用が推奨される
• ナビゲーションガード（beforeEachなど）も設定可能だが、Nuxtではルートミドルウェアの利用が推奨される
• ルーターの初期化完了を待つisReady()やエラーハンドリング用のonErrorも備わっている

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

使うべきケース

• ユーザーの操作に応じて動的にページ遷移を制御したいとき
• ルートの動的追加・削除が必要なプラグインや拡張機能を作るとき
• ルート情報を取得して条件分岐やUI制御を行いたいとき
• ナビゲーションガードを細かく制御したいが、ルートミドルウェアでは対応しきれない場合

使わない方がよいケース

• 単純なページ遷移だけなら、NuxtのnavigateToを使う方が推奨される（履歴管理やSSR対応が最適化されているため）
• 認証や権限管理などのルーティング制御は、Nuxtのルートミドルウェアを使う方がシンプルで保守しやすい
• ルーティングの初期化前にuseRouterを使うとエラーになることがあるため、SSRやHydrationのタイミングに注意が必要

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

1. ボタンで前のページに戻る

ユーザーが「戻る」ボタンを押したときに履歴を戻す処理はよくある要件です。

<script setup lang="ts">
const router = useRouter()
function goBack() {
  router.back()
}
</script>

<template>
  <button @click="goBack">戻る</button>
</template>

2. 動的にルートを追加してプラグイン拡張

プラグインやモジュールで新しいルートを動的に追加したい場合。

const router = useRouter()

router.addRoute({
  name: 'custom',
  path: '/custom',
  component: () => import('~/components/CustomPage.vue')
})

このように動的にルートを追加することで、柔軟な拡張が可能です。

3. ルート情報を取得して条件分岐

現在のルート名やパスに応じて表示を切り替えたい場合。

<script setup lang="ts">
const router = useRouter()
const currentRoute = router.currentRoute.value
</script>

<template>
  <div v-if="currentRoute.name === 'home'">
    ホームページです
  </div>
  <div v-else>
    その他のページです
  </div>
</template>

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

SSRとHydrationのタイミング

useRouterはクライアント側でルーターインスタンスを返しますが、サーバーサイドレンダリング（SSR）時はルーターの状態が完全に同期していない場合があります。
特に初期化前にuseRouterを使うとエラーや不整合が起きることがあるため、router.isReady()で初期化完了を待つか、クライアント専用の処理に限定することが重要です。

パフォーマンスへの影響

動的にルートを追加・削除する操作は便利ですが、多用するとルーティングの管理が複雑になり、パフォーマンスや保守性に悪影響を及ぼす可能性があります。
必要な場合に限定し、ルートの追加はアプリ起動時やプラグイン初期化時にまとめて行うのが望ましいです。

router.push()よりnavigateTo推奨

Nuxtではrouter.push()も使えますが、navigateToはNuxtのルーティングシステムに最適化されており、SSRや静的サイト生成（SSG）との相性も良いため推奨されています。
可能な限りnavigateToを使い、useRouterはルート情報の取得や動的ルート管理に限定するのがベストプラクティスです。

まとめ

NuxtのuseRouterはVue Routerの機能を直接利用できる強力なコンポーザブルであり、動的なルーティング操作やナビゲーション制御に役立ちます。
ただし、Nuxt固有のnavigateToやルートミドルウェアと使い分けることが重要で、SSRやHydrationのタイミングにも注意が必要です。
実務では「戻る」ボタンの実装や動的ルート追加、ルート情報を使った条件分岐などで活用されることが多く、適切に使うことでUX向上や開発効率アップに繋がります。

Nuxtのルーティングをより深く理解し、useRouterを効果的に活用してみてください。