頁面

Nuxt Kit 提供了一組實用工具，幫助您建立和使用頁面。您可以使用這些實用工具來操作頁面配置或定義路由規則。

`extendPages`

在 Nuxt 中，路由是根據 app/pages 目錄中的檔案結構自動生成的。然而，在某些情況下您可能需要自定義這些路由。例如，您可能需要為 Nuxt 未生成的動態頁面新增路由、刪除現有路由或修改路由的配置。對於此類自定義，Nuxt 提供了 extendPages 功能，允許您擴充套件和更改頁面配置。

觀看 Vue School 關於 extendPages 的影片。

使用

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`	`string`	`false`	路由的名稱。對於程式化導航和識別路由很有用。
`path`	`string`	`false`	路由的 URL 路徑。如果未設定，Nuxt 將從檔案位置推斷它。
`檔案`	`string`	`false`	用作路由元件的 Vue 檔案的路徑。
`meta`	`Record<string, any>`	`false`	路由的自定義元資料。可在佈局、中介軟體或導航守衛中使用。
`alias`	`string[] \| string`	`false`	路由的一個或多個別名路徑。對於支援多個 URL 很有用。
`redirect`	`RouteLocationRaw`	`false`	路由的重定向規則。支援命名路由、物件或字串路徑。
`children`	`NuxtPage[]`	`false`	此路由下的巢狀子路由，用於佈局或檢視巢狀。

`extendRouteRules`

Nuxt 由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`	`boolean`	`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 })
  },
})

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

型別

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

引數

input：一箇中間件物件或一箇中間件物件陣列，具有以下屬性

屬性	型別	必需	描述
`name`	`string`	`true`	中介軟體的名稱。
`path`	`string`	`true`	中介軟體的檔案路徑。
`global`	`boolean`	`false`	如果設定為 `true`，則將中介軟體應用於所有路由。

options：一個具有以下屬性的物件

屬性	型別	預設	描述
`override`	`boolean`	`false`	如果 `true`，則替換同名中介軟體。
`prepend`	`boolean`	`false`	如果 `true`，則在現有中介軟體之前新增中介軟體。

這有幫助嗎？

報告問題或在 GitHub 上編輯此頁面

Context

Nuxt Kit 提供了一組實用工具，幫助您處理上下文。

Layout

Nuxt Kit 提供了一組實用工具，幫助您處理佈局。