ページ

ソース
Nuxt Kit は、ページの作成と使用を支援する一連のユーティリティを提供します。これらのユーティリティを使用して、ページの設定を操作したり、ルーティングルールを定義したりできます。

extendPages

Nuxt では、app/pages ディレクトリ内のファイルの構造に基づいてルートが自動的に生成されます。ただし、これらのルートをカスタマイズしたいシナリオがあるかもしれません。たとえば、Nuxt によって生成されない動的なページにルートを追加したり、既存のルートを削除したり、ルートの設定を変更したりする必要があるかもしれません。このようなカスタマイズのために、Nuxt は、ページ構成を拡張および変更できる extendPages 機能を提供しています。

extendPages についての Vue School ビデオを見る。

使用方法

import { createResolver, defineNuxtModule, extendPages } from '@nuxt/kit'

export default defineNuxtModule({
  setup (options) {
    const { resolve } = createResolver(import.meta.url)

    extendPages((pages) => {
      pages.unshift({
        name: 'prismic-preview',
        path: '/preview',
        file: resolve('runtime/preview.vue'),
      })
    })
  },
})

タイプ

function extendPages (callback: (pages: NuxtPage[]) => void): void

パラメーター

callback: ページ設定で呼び出される関数。この配列を要素の追加、削除、変更によって変更できます。注: コピーされた配列への変更は設定に反映されないため、提供されたページ配列を直接変更する必要があります。

プロパティタイプ必須説明
name文字列falseルートの名前。プログラムによるナビゲーションやルートの識別に役立ちます。
パス文字列falseルートの URL パス。設定されていない場合、Nuxt はファイルの位置から推論します。
ファイル文字列falseルートのコンポーネントとして使用される Vue ファイルへのパス。
metaRecord<string, any>falseルートのカスタムメタデータ。レイアウト、ミドルウェア、ナビゲーションガードで使用できます。
aliasstring[] | stringfalseルートのエイリアスパスを1つ以上。複数の URL をサポートするのに役立ちます。
redirectRouteLocationRawfalseルートのリダイレクトルール。名前付きルート、オブジェクト、または文字列パスをサポートします。
childrenNuxtPage[]falseレイアウトまたはビューのネストのためのこのルートの下のネストされた子ルート。

extendRouteRules

Nuxt はNitroサーバーエンジンによって動作します。Nitro を使用すると、リダイレクト、プロキシ、キャッシュ、ルートへのヘッダーの追加などのアクションに役立つ高レベルのロジックを構成に直接組み込むことができます。この構成は、ルートパターンを特定のルート設定に関連付けることで機能します。

Nitro ルートルールについては、Nitro ドキュメント.
ルーティングルールとルートミドルウェアの追加についての Vue School ビデオを見る。

使用方法

import { createResolver, defineNuxtModule, extendPages, extendRouteRules } from '@nuxt/kit'

export default defineNuxtModule({
  setup (options) {
    const { resolve } = createResolver(import.meta.url)

    extendPages((pages) => {
      pages.unshift({
        name: 'preview-new',
        path: '/preview-new',
        file: resolve('runtime/preview.vue'),
      })
    })

    extendRouteRules('/preview', {
      redirect: {
        to: '/preview-new',
        statusCode: 302,
      },
    })

    extendRouteRules('/preview-new', {
      cache: {
        maxAge: 60 * 60 * 24 * 7,
      },
    })
  },
})

タイプ

function extendRouteRules (route: string, rule: NitroRouteConfig, options?: ExtendRouteRulesOptions): void

パラメーター

route: 照合するルートパターン。
rule: 一致したルートに適用するルーティングルールの設定。

ルーティングルールの設定については、ハイブリッドレンダリング > ルートルールで詳細を確認できます。

options: ルート設定に渡すオブジェクト。override が true に設定されている場合、既存のルーティング設定を上書きします。

名前タイプデフォルト説明
overrideブール値falseルーティングルールの設定を上書きします。デフォルトは false です。

addRouteMiddleware

すべてのルートまたは特定のルートで利用できるようにルーティングミドルウェアを登録します。

ルーティングミドルウェアは、addRouteMiddleware コンポーザブルを介してプラグインで定義することもできます。

ルーティングミドルウェアの詳細については、ルーティングミドルウェアのドキュメントを参照してください。
ルーティングルールとルートミドルウェアの追加についての Vue School ビデオを見る。

使用方法

import { addRouteMiddleware, createResolver, defineNuxtModule } from '@nuxt/kit'

export default defineNuxtModule({
  setup () {
    const { resolve } = createResolver(import.meta.url)

    addRouteMiddleware({
      name: 'auth',
      path: resolve('runtime/auth'),
      global: true,
    }, { prepend: true })
  },
})

タイプ

function addRouteMiddleware (input: NuxtMiddleware | NuxtMiddleware[], options?: AddRouteMiddlewareOptions): void

パラメーター

input: 次のプロパティを持つミドルウェアオブジェクト、またはミドルウェアオブジェクトの配列。

プロパティタイプ必須説明
name文字列trueミドルウェアの名前。
パス文字列trueミドルウェアへのファイルパス。
globalブール値falsetrue に設定されている場合、すべてのルートにミドルウェアを適用します。

options: 次のプロパティを持つオブジェクト。

プロパティタイプデフォルト説明
overrideブール値falsetrue の場合、同じ名前のミドルウェアを置き換えます。
prependブール値falsetrue の場合、既存のミドルウェアの前にミドルウェアを追加します。