ルーティング

Nuxtの中核機能の1つは、ファイルシステムのルーターです。 pages/ディレクトリ内の各Vueファイルは、それぞれ対応するURL（またはルート）を作成し、ファイルの内容を表示します。 各ページに対して動的インポートを使用することで、Nuxtはコード分割を活用して要求されたルートに必要な最小限のJavaScriptを提供します。

ページ

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

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

// pagesディレクトリを作成し、各種ページファイルを配置する。
// 「posts/」のように、さらにサブディレクトリを作成することも可。
// [id].vueは、ルートパラメータからidを受け取ることで動的に表示できる。

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

Info 詳細については、「ガイド」 > 「ディレクトリ構築」 > 「ページ」を参照してください。

ナビゲーション

<NuxtLink>コンポーネントは、ページ間をリンクするために使用されます。（href属性である<a>タグをレンダリングします）。 アプリケーションがハイドレート（静的なウェブページを動的なものに変換する手法）されると、ブラウザのURLを更新することでJavaScriptが実行されます。 これにより、ページのリフレッシュ（更新）が防止され、アニメーション付きの遷移が可能となります。

// Topページの場合は、NuxtLink to="/"となる
<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>

        // :to="/posts/{{ id }}"のようにパラメータをバインドすることも可（toの前に :を付けることに注意）
        <li><NuxtLink :to="/posts/{{ id }}">Post3</NuxtLink></li>
      </ul>
    </nav>
  </header>
</template>

Info 詳細については「API > Components > Nuxt Link」のドキュメントを参照してください。

ルートパラメータ

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

// 下記の例では、ルートパラメータを取得している。

<script setup>
  const route = useRoute()

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

Info 詳細については「API > Composables > Use Route」のドキュメントを参照してください。

ルートミドルウェア

Nuxtは、アプリケーション全体で使用できるカスタマイズ可能なルートミドルウェアフレームワークを提供しており、 特定のルートに移動する前に実行したいコードを抽出するのに最適です。

ルートミドルウェアには3種類あります:

• 匿名（またはインライン）ルートミドルウェアは、それらが使用されるページ内で直接定義されます。
• 名前付きルートミドルウェアは、middleware/ ディレクトリに配置され、ページで使用されるときに非同期インポート経由で自動的に読み込まれます。（注意: ルートミドルウェアの名前はケバブケースに正規化されるため、someMiddlewareはsome-middlewareとなります。）
• グローバルなルートミドルウェアは、middleware/ディレクトリに配置されます（.global のサフィックスが付いています）し、すべてのルート変更時に自動的に実行されます。

/dashboardページを保護するための認証ミドルウェアの例です:

// ページが複数ある場合はpagesディレクトリを利用する。必ずしもapp.vueは必要ない。
// 例えば「ランディングページ（ペライチ）」のような場合は、直接app.vueを利用して制作することになる。

export default defineNuxtRouteMiddleware((to, from) => {
  // isAuthenticated() は、ユーザーが（ログインなどで）認証されているかどうかを検証するメソッド
  if (isAuthenticated() === false) {
    return navigateTo('/login')
  }
})

// definePageMeta で defineNuxtRouteMiddleware を呼び出す。

<script setup>
  definePageMeta({
    middleware: 'auth'
  })
</script>

<template>
  <h1>Welcome to your dashboard</h1>
</template>

Info 詳細は「Guide > Directory Structure > Middleware」を参照してください。

ルートの検証（Route Validation）

Nuxtでは、対象のページのscript内にdefinePageMeta - validateプロパティを使用することで検証できます。

validateプロパティは、ルートを引数として受け取ります。 このプロパティでは、このページでレンダリングするための有効なルートかどうかを判定するために、真偽値を返すことができます。 もしfalseであり、他の一致が見つからない場合は、404エラーとなります。 また、直接的にstatusCode/statusMessageを持つオブジェクトを返すことで、エラーを即座に返却することもできます（他の一致はチェックされません）。

もしより複雑なユースケースがある場合は、代わりに匿名のルートミドルウェアを使用することができます。

// 下記の例では、pages/posts/[id].vueでの記述例です。

<script setup>
  definePageMeta({
    validate: async (route) => {
      // idが数字のみで構成されているかどうかをチェック
      return /^\d+$/.test(route.params.id)
    }
})
</script>