Nuxtのコア機能の一つにファイルシステムルーターがあります。app/pages/ディレクトリ内のすべてのVueファイルは、ファイルの内容を表示する対応するURL（またはルート）を作成します。各ページに対して動的インポートを使用することで、Nuxtはコードスプリッティングを活用し、要求されたルートに対して最小限のJavaScriptを提供します。

ページ

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

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

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

ナビゲーション

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

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

const route = useRoute()

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

ルートミドルウェア

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

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

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

/dashboardページを保護するauthミドルウェアの例：

function isAuthenticated(): boolean { return false }
// ---cut---
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)
  }
})