Nuxt 3で「No match found for location」警告が出た原因と解決策

Nuxt 3 の開発中にコンソールに次のような警告が表示されることがあります。

[Vue Router warn]: No match found for location with path "/hoge"

この警告は、Vue Router が指定されたパスに一致するルートを見つけられなかった場合に発生します。

ローカル開発時だけでなく、ビルド後の本番環境で 404 にリダイレクトされる場合もあるため、原因を正確に特定することが重要です。

本記事では、この警告の典型的な発生原因、デバッグ手順、修正方法を Nuxt 3 目線で解説します。

目次

1. 警告が発生する仕組み

Nuxt 3 は Vue Router v4 を内部的に利用しています。ルート情報は pages/ ディレクトリの構造から自動生成されますが、存在しないパスへ遷移した場合、Vue Router はルートを見つけられず警告を出します。

たとえば pages/index.vue しか存在しないのに /about へ遷移すると、この警告が出力されます。

さらに、動的ルート（例: pages/users/[id].vue）のパラメータが間違っている場合も同様です。例えば /users/ の末尾スラッシュが余計だったり、意図しない型（文字列ではなくオブジェクト）を渡していると一致せず警告になります。

2. よくある原因パターン

以下のパターンで発生することが多いです。

  • pages ディレクトリに対応するファイルが存在しない
  • 動的ルートのパラメータが間違っている (/users/undefined)
  • SSR 時に useRoute を呼び出すタイミングが早すぎて空の値が渡る
  • ルーター設定の base や trailingSlash のオプションが合っていない
  • 本番環境のリバースプロキシ設定でパスが書き換わり、存在しないルートになっている

3. デバッグと再現方法

まずは 実際のパスをログ出力 して確認します。

<script setup>
import { useRoute } from 'vue-router'

const route = useRoute()
console.log('Current path:', route.fullPath)
</script>

これにより、どのパスに遷移して警告が発生しているかを特定できます。さらに、nuxt dev --verbose で詳細ログを確認すると、ルート解決の過程が表示されるため、存在しないパスであることが明確になります。

4. 解決方法

エラーの原因が特定できたら、以下のいずれかで解決します。

  1. 該当するページファイルを作成する
  2. 動的ルートのパラメータを正しく渡す
  3. SSR でルートがまだ確定していない場合は onMounted 内でアクセスする
  4. リバースプロキシや CDN のルーティング設定を見直す

例: 動的ルートを正しく扱うコード

<script setup>
import { useRouter } from 'vue-router'

const router = useRouter()
function goToUser(id) {
  router.push({ name: 'users-id', params: { id: String(id) } })
}
</script>

params を必ず文字列に変換することで、Vue Router のルート一致判定に成功しやすくなります。

5. 実運用での注意点

本番環境では、SPA モードではなく SSR や静的生成モードを使うことが多いため、ビルド時に存在しないパスは 404 ページが生成されません。error.vue を設置しておくことで、ユーザーに適切なエラーメッセージを表示できます。また、意図しない警告を放置するとログがノイズになり、他の本番エラーを見落とすリスクが高まります。

さらに、route.matched を活用して一致したルートを確認し、意図せず空配列が返る場合はデフォルトのフォールバックページにリダイレクトする処理を追加すると UX が向上します。

6. まとめ

Nuxt 3 で「No match found for location」警告が出る場合、多くは存在しないページへの遷移か、動的ルートのパラメータミスが原因です。デバッグログや Vue Router の API を使い、どのパスで失敗しているかを特定した上で、ファイル作成やパラメータ修正を行えば解決できます。放置せず早めに対処することで、ユーザー体験と開発効率の両方を守ることができます。

参考

タイトルとURLをコピーしました