カスタムルーティング

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

カスタムルートの追加

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

ルーター設定

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

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

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は、routes関数から返される新しいルートに、提供するコンポーネントのdefinePageMetaで定義されたメタデータを追加しません。これを行いたい場合は、ビルド時に呼び出されるpages:extendフックを使用する必要があります。

Pagesフック

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

例えば、あらゆる.tsファイルのルート作成を阻止するには

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

export default defineNuxtConfig({
  hooks: {
    'pages:extend' (pages) {
      // add a route
      pages.push({
        name: 'profile',
        path: '/profile',
        file: '~/extra-pages/profile.vue',
      })

      // remove routes
      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はルーターをカスタマイズするための追加オプションを提供しています。

router.optionsの使用

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

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)
      // add a route
      files.push({
        path: resolver.resolve('./runtime/router-options'),
        optional: true,
      })
    },
  },
})

nuxt.configの使用

注: JSONにシリアル化可能なオプションのみ設定可能です。

  • linkActiveClass
  • linkExactActiveClass
  • end
  • sensitive
  • strict
  • ハッシュモード
  • 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はデフォルトの履歴にフォールバックします。

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