ルーティング

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

ページ

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

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

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

{
  "routes": [
    {
      "path": "/about",
      "component": "pages/about.vue"
    },
    {
      "path": "/",
      "component": "pages/index.vue"
    },
    {
      "path": "/posts/:id",
      "component": "pages/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. 名前付きルートミドルウェアは、app/middleware/ ディレクトリに配置され、ページで使用されると非同期インポートを介して自動的にロードされます。(注: ルートミドルウェア名はケバブケースに正規化されます。そのため、someMiddleware は some-middleware になります。)
3. グローバルルートミドルウェアは、app/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')
  }
})

<script setup lang="ts">
definePageMeta({
  middleware: 'auth',
})
</script>

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

ルート検証

Nuxt は、検証したい各ページの definePageMeta() の validate プロパティを介してルート検証を提供します。

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

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

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