こんにちは、かつコーチです。
前回、Nuxt.jsのプロジェクトを実際に作成しました。
今回は、Nuxtの中でも特につまずきやすい「ルーティング」の仕組みを解説します。
Vue Router（Vue.js標準のルーティングライブラリ）を自分で設定した経験がある方ほど、Nuxtの手軽さに驚くはずです。
pages/ディレクトリとは？
ファイルベースルーティングの定義
Nuxt.jsは、ファイルベースルーティングという仕組みを採用しています。
ファイルベースルーティングとは、ファイルやフォルダの配置がそのままURL構造になる仕組みのことです。
pages/ディレクトリの中にVueファイルを置くだけで、Nuxtが自動的にルート（URLと画面の対応関係）を生成してくれます。
素のVue.jsで開発する場合は、Vue Routerを自分でインストールし、URLと表示コンポーネントの対応表を自力で書く必要があります。
Nuxtでは、その対応表を書く作業自体がほぼ不要になります。
なぜファイルベースルーティングが必要なのか
ページ数が少ないうちは、ルーティングを手書きしてもそれほど負担ではありません。
ですが、ページ数が10、20と増えていくと、対応表のメンテナンスだけで一苦労になります。
新しいページを追加するたびに「ルート設定ファイルへの追記」を忘れる、というミスも起きがちです。
ファイルベースルーティングであれば、「ファイルを置く＝ページが増える」という直感的な操作だけで済みます。
設定ファイルの書き忘れによるバグを、構造的に防げるのが大きなメリットです。
基本の書き方 / 実装手順
手順1：index.vueでトップページを作る
pages/index.vueを作成すると、これがトップページ（/）になります。
<!-- pages/index.vue -->
<template>
<div>
<h1>トップページです</h1>
</div>
</template>
npm run devで開発サーバーを起動し、http://localhost:3000/にアクセスすると、この内容が表示されます。
手順2：ファイル名でルートを増やす
続いて、pages/about.vueを作成してみます。
<!-- pages/about.vue -->
<template>
<div>
<h1>会社紹介ページです</h1>
</div>
</template>
ファイルを保存するだけで、http://localhost:3000/aboutにアクセスできるようになります。
ルート設定ファイルへの追記は一切不要です。
手順3：フォルダを使ってURLを階層化する
pages/blog/index.vueのように、フォルダの中にindex.vueを置くこともできます。
<!-- pages/blog/index.vue -->
<template>
<div>
<h1>ブログ一覧ページです</h1>
</div>
</template>
この場合、URLは/blogになります。
さらにpages/blog/[id].vueのように角括弧付きのファイル名を使うと、動的なルートを作れます。
<!-- pages/blog/[id].vue -->
<template>
<div>
<h1>記事ID：{{ $route.params.id }}</h1>
</div>
</template>
/blog/1や/blog/2など、末尾の数字が変わるURLすべてに対応できます。
手順4：NuxtLinkでページ遷移する
ページ間の遷移には、<a>タグの代わりに<NuxtLink>コンポーネントを使います。
<!-- pages/index.vue -->
<template>
<div>
<h1>トップページです</h1>
<NuxtLink to="/about">会社紹介ページへ</NuxtLink>
</div>
</template>
| 遷移方法 | 挙動 | 選ぶ判断軸 |
|---|---|---|
<a href="..."> | ページを丸ごと再読み込みする | Nuxtアプリ内の遷移には非推奨 |
<NuxtLink to="..."> | 画面を再読み込みせず、必要な部分だけ差し替える | Nuxtアプリ内の遷移は基本これを使う |
<NuxtLink>を使うと、ページ遷移が速く、状態（入力中のフォーム内容など）も保持されやすくなります。
つまずきやすい設定・注意点
ファイル名の付け方に注意する
pages/直下のファイル名は、そのままURLの一部になります。
日本語ファイル名や、大文字・小文字が混在したファイル名は避け、kebab-case（ハイフン区切り）に統一するのが無難です。
よくあるつまずきポイント・エラー対処
index.vueを作り忘れて真っ白な画面になった話
❌ Before：pages/index.vueを作らずにpages/top.vueだけ作った状態
トップページ用のつもりでpages/top.vueを作成し、http://localhost:3000/にアクセスした状態です。
このとき画面には何も表示されず、ブラウザのコンソールには次のような404関連のエラーが出ます。
[404] Page not found: /
私も新規プロジェクトの立ち上げ時、うっかりtop.vueという名前でトップページを作ってしまい、しばらく真っ白な画面を前に固まった経験があります。
原因は単純で、/に対応するファイルはindex.vueという決まった名前でなければならない、というルールを忘れていたことでした。
✅ After：index.vueにリネームして解決する
mv pages/top.vue pages/index.vue
ファイル名をindex.vueに変更すると、http://localhost:3000/で正しく表示されるようになりました。
「トップページだけ表示されない」というときは、まずファイル名がindex.vueになっているか確認してみてください。
応用・一歩先の使い方
ネストしたレイアウトへの接続
ページ数が増えてくると、「共通のヘッダー・フッターをどう管理するか」という悩みが出てきます。
Nuxtには、この悩みに応えるlayouts/という仕組みも用意されています。
pages/でルーティングの基礎を理解できたら、次は共通レイアウトの管理方法へと進んでいくとスムーズです。
動的ルート・ネストされたルートへの発展
今回紹介した[id].vueは、動的ルートの入り口にすぎません。
複数のパラメータを組み合わせたり、ルートを深くネストさせたりする書き方も存在します。
実務でブログやECサイトのような「一覧＋詳細」の画面を作る際には、この応用パターンが頻繁に登場します。
まとめ
この記事のポイント
pages/ディレクトリの構造が、そのままURL構造になるindex.vueはそのフォルダの起点となるページ用ファイル名[id].vueのように角括弧を使うと動的ルートを作れる- ページ遷移には
<a>ではなく<NuxtLink>を使う
次に読むべき記事
ルーティングの基礎が理解できたら、次は共通レイアウトの管理方法に進みましょう。
「layouts/で共通レイアウトを管理する」で、ヘッダー・フッターの扱い方を解説予定です。