nuxt logo

ドキュメント翻訳（非公式）

Nuxt.js
Version:v3.17

カスタムルーティング

Nuxtでは、ルーティングはpagesディレクトリ内のファイル構造によって定義されます。しかし、内部でvue-routerを使用しているため、Nuxtはプロジェクトにカスタムルートを追加するためのいくつかの方法を提供しています。

カスタムルートの追加

Nuxtでは、ルーティングはpagesディレクトリ内のファイル構造によって定義されます。しかし、内部でvue-routerを使用しているため、Nuxtはプロジェクトにカスタムルートを追加するためのいくつかの方法を提供しています。

ルーター設定

ルーターオプションを使用して、スキャンされたルートを受け取り、カスタマイズされたルートを返す関数を使用してルートをオーバーライドまたは拡張することができます。

nullまたはundefinedを返すと、Nuxtはデフォルトのルートにフォールバックします（入力配列を変更するのに便利です）。

app/router.options.ts
import type { RouterConfig } from '@nuxt/schema'

export default {
  // https://router.vuejs.org/api/interfaces/routeroptions.html#routes
  routes: (_routes) => [
    {
      name: 'home',
      path: '/',
      component: () => import('~/pages/home.vue')
    }
  ],
} satisfies RouterConfig

Nuxtは、提供されたコンポーネントのdefinePageMetaで定義されたメタデータで、routes関数から返される新しいルートを拡張しません。それを実現したい場合は、ビルド時に呼び出されるpages:extendフックを使用する必要があります。

ページフック

pages:extend nuxtフックを使用して、スキャンされたルートからページを追加、変更、または削除することができます。

例えば、.tsファイルのルートを作成しないようにするには：

nuxt.config.ts
import type { NuxtPage } from '@nuxt/schema'

export default defineNuxtConfig({
  hooks: {
    'pages:extend' (pages) {
      // ルートを追加
      pages.push({
        name: 'profile',
        path: '/profile',
        file: '~/extra-pages/profile.vue'
      })

      // ルートを削除
      function removePagesMatching (pattern: RegExp, pages: NuxtPage[] = []) {
        const pagesToRemove: NuxtPage[] = []
        for (const page of pages) {
          if (page.file && pattern.test(page.file)) {
            pagesToRemove.push(page)
          } else {
            removePagesMatching(pattern, page.children)
          }
        }
        for (const page of pagesToRemove) {
          pages.splice(pages.indexOf(page), 1)
        }
      }
      removePagesMatching(/\.ts$/, pages)
    }
  }
})

Nuxtモジュール

特定の機能に関連する一連のページを追加する予定がある場合は、Nuxtモジュールを使用することをお勧めします。

Nuxtキットは、ルートを追加するためのいくつかの方法を提供しています:

ルーターオプション

vue-routerのオプションをカスタマイズすることに加えて、Nuxtはルーターをカスタマイズするための追加オプションを提供しています。

app/router.optionsの使用

これはルーターオプションを指定するための推奨方法です。

app/router.options.ts
import type { RouterConfig } from '@nuxt/schema'

export default {
} satisfies RouterConfig

pages:routerOptionsフック内にファイルを追加することで、さらにルーターオプションファイルを追加することが可能です。配列内の後の項目は、前の項目をオーバーライドします。

このフックにルーターオプションファイルを追加すると、ページベースのルーティングがオンになります。ただし、optionalが設定されている場合は、ページベースのルーティングがすでに有効になっている場合にのみ適用されます。

nuxt.config.ts
import { createResolver } from '@nuxt/kit'

export default defineNuxtConfig({
  hooks: {
    'pages:routerOptions' ({ files }) {
      const resolver = createResolver(import.meta.url)
      // ルートを追加
      files.push({
        path: resolver.resolve('./runtime/app/router-options'),
        optional: true
      })
    }
  }
})

nuxt.configの使用

注意: JSONシリアライズ可能なオプションのみが設定可能です：

  • linkActiveClass
  • linkExactActiveClass
  • end
  • sensitive
  • strict
  • hashMode
  • scrollBehaviorType
nuxt.config
export default defineNuxtConfig({
  router: {
    options: {}
  }
})

ハッシュモード (SPA)

hashMode 設定を使用してSPAモードでハッシュ履歴を有効にすることができます。このモードでは、ルーターは実際のURLの前にハッシュ文字（#）を使用します。これが有効になっている場合、URLはサーバーに送信されず、SSRはサポートされません。

nuxt.config.ts
export default defineNuxtConfig({
  ssr: false,
  router: {
    options: {
      hashMode: true
    }
  }
})

ハッシュリンクのスクロール動作

ハッシュリンクのスクロール動作をカスタマイズすることができます。設定をsmoothに設定し、ハッシュリンク付きのページを読み込むと（例：https://example.com/blog/my-article#comments）、ブラウザがスムーズにこのアンカーにスクロールするのがわかります。

nuxt.config.ts
export default defineNuxtConfig({
  router: {
    options: {
      scrollBehaviorType: 'smooth'
    }
  }
})

カスタム履歴 (高度な設定)

ベースURLを受け取り、履歴モードを返す関数を使用して履歴モードをオーバーライドすることができます。nullまたはundefinedを返すと、Nuxtはデフォルトの履歴にフォールバックします。

app/router.options.ts
import type { RouterConfig } from '@nuxt/schema'
import { createMemoryHistory } from 'vue-router'

export default {
  // https://router.vuejs.org/api/interfaces/routeroptions.html
  history: base => import.meta.client ? createMemoryHistory(base) : null /* default */
} satisfies RouterConfig

※このページは Nuxt.js 公式ドキュメントの翻訳ページ（非公式）です。

公式ドキュメントの該当ページはこちら：
https://nuxt.com/docs/3.x/guide/recipes/custom-routing