ルーティング

Nuxtの中核機能の1つに、ファイルシステムルーターがあります。 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() コンポーザブルは、Vueコンポーネントの<script setup>ブロックまたはsetup()メソッドで使用して、現在のルートの詳細にアクセスできます。

<script setup lang="ts">
const 
route
 = 
useRoute
()

// When accessing /posts/1, route.params.id will be 1
console
.
log
(
route
.
params
.
id
)
</script>

ルートミドルウェア

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

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

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

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

export default 
defineNuxtRouteMiddleware
((
to
, 
from
) => {
  // isAuthenticated() is an example method verifying if a user is authenticated
  if (
isAuthenticated
() === false) {
    return 
navigateTo
('/login')
  }
})

ルートバリデーション

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

validateプロパティは、引数としてrouteを受け取ります。このページでレンダリングする有効なルートかどうかを判断するために、ブール値を返すことができます。falseを返した場合、別のマッチが見つからないと、404エラーが発生します。statusCode/statusMessageを含むオブジェクトを直接返すことで、すぐにエラーで応答することもできます（他のマッチはチェックされません）。

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

<script setup lang="ts">
definePageMeta
({
  
validate
: async (
route
) => {
    // Check if the id is made up of digits
    return typeof 
route
.
params
.
id
 === 'string' && /^\d+$/.
test
(
route
.
params
.
id
)
  }
})
</script>