Nuxtの主要な特徴の一つはファイルシステムルーターです。pages/ ディレクトリ内のすべてのVueファイルが、そのファイルの内容を表示する対応するURL（またはルート）を作成します。各ページの動的なインポートを使用することで、Nuxtはコードスプリッティングを活用し、要求されたルートのJavaScriptの最小量を出力します。

ページ

Nuxtのルーティングは vue-router に基づいており、pages/ ディレクトリ 内で作成された各コンポーネントからルートを生成します。

このファイルシステムルーティングは、命名規則を使用して動的なルートとネストされたルートを作成します。

-| pages/
---| about.vue
---| index.vue
---| posts/
-----| [id].vue

ナビゲーション

<NuxtLink> コンポーネントはページ間をリンクします。href 属性がページのルートに設定された <a> タグをレンダリングします。アプリケーションがハイドレートされると、ブラウザのURLを更新するJavaScriptによるページ遷移が行われます。これにより、全ページのリフレッシュが防止され、アニメーション遷移が可能になります。

<NuxtLink> がクライアント側でビューポートに入ると、Nuxtは予めリンク先のページのコンポーネントとペイロード（生成されたページ）を自動的にプリフェッチします。これにより、ナビゲーションが高速化されます。

<template>
  <header>
    <nav>
      <ul>
        <li><NuxtLink to="/about">About</NuxtLink></li>
        <li><NuxtLink to="/posts/1">Post 1</NuxtLink></li>
        <li><NuxtLink to="/posts/2">Post 2</NuxtLink></li>
      </ul>
    </nav>
  </header>
</template>

ルートパラメータ

useRoute()というコンポーザブルは、<script setup> ブロックまたはVueコンポーネントの setup() メソッド内で、現在のルートの詳細にアクセスするために使用できます。

const route = useRoute()

// /posts/1にアクセスすると、route.params.idは1になります
console.log(route.params.id)

ルートミドルウェア

Nuxtは、特定のルートへの遷移前に実行したいコードを抽出するための、カスタム可能なルートミドルウェアフレームワークを提供します。

ルートミドルウェアには三つの種類があります:

1. 匿名（またはインライン）のルートミドルウェアは、使用されるページで直接定義されます。
2. 名前付きのルートミドルウェアは、middleware/ ディレクトリに配置され、ページで使用されるときに自動的に非同期インポートで読み込まれます。（注：ルートミドルウェアの名前はケバブケースに変換され、someMiddleware は some-middleware になります）。
3. グローバルルートミドルウェアは、middleware/ ディレクトリ（.global という接尾辞付き）に配置され、ルートが変更されるたびに自動的に実行されます。

/dashboard ページを保護する auth ミドルウェアの例は以下の通りです：

function isAuthenticated(): boolean { return false }
// ---カット---
export default defineNuxtRouteMiddleware((to, from) => {
  // isAuthenticated()は、ユーザーが認証されているかどうかを確認する例のメソッドです
  if (isAuthenticated() === false) {
    return navigateTo('/login')
  }
})

ルートのバリデーション

Nuxtは、バリデーションをしたい各ページの definePageMeta() にある validate プロパティを通じてルートバリデーションを提供します。

validate プロパティは route を引数として受け取ります。このページでレンダリングするのが有効なルートかどうかを決定するために、ブーリアン値を返すことができます。false を返すと、404エラーが返されます。また、statusCode/statusMessage のオブジェクトを直接返すことでエラーをカスタマイズすることもできます。

もしあなたがさらに複雑な使用ケースを持つなら、無名のルートミドルウェアを代わりに使用することができます。

definePageMeta({
  validate: async (route) => {
    // IDが数字で構成されていることを確認します
    return typeof route.params.id === 'string' && /^\d+$/.test(route.params.id)
  }
})