页面 - Nuxt Kit - Nuxt 中文文档

`extendPages`

在 Nuxt 3 中，路由会根据 pages 目录中文件的结构自动生成。然而，在某些情况下，您可能需要自定义这些路由。例如，您可能需要为 Nuxt 未生成的动态页面添加一个路由，移除一个已存在的路由，或者修改路由的配置。对于此类自定义，Nuxt 提供了 extendPages 特性，允许您扩展和修改页面配置。

观看 Vue School 关于 extendPages 的视频。

类型

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

type NuxtPage = {
  name?: string
  path: string
  file?: string
  meta?: Record<string, any>
  alias?: string[] | string
  redirect?: RouteLocationRaw
  children?: NuxtPage[]
}

参数

`callback`

类型: (pages: NuxtPage[]) => void

必需: true

一个将使用页面配置调用的函数。您可以通过添加、删除或修改其元素来修改这个数组。注意：您应该直接修改提供的页面数组，因为对复制数组的更改不会反映在配置中。

示例

// https://github.com/nuxt-modules/prismic/blob/master/src/module.ts
import { createResolver, defineNuxtModule, extendPages } from '@nuxt/kit'

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

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

`extendRouteRules`

Nuxt 由 Nitro 服务器引擎驱动。使用 Nitro，您可以将高级逻辑直接集成到您的配置中，这对于重定向、代理、缓存和向路由添加头等操作非常有用。这种配置通过将路由模式与特定的路由设置关联起来。

您可以在 Nitro 文档中阅读更多关于 Nitro 路由规则的信息。

观看 Vue School 关于添加路由规则和路由中间件的视频。

类型

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

interface NitroRouteConfig {
  cache?: CacheOptions | false;
  headers?: Record<string, string>;
  redirect?: string | { to: string; statusCode?: HTTPStatusCode };
  prerender?: boolean;
  proxy?: string | ({ to: string } & ProxyOptions);
  isr?: number | boolean;
  cors?: boolean;
  swr?: boolean | number;
  static?: boolean | number;
}

interface ExtendRouteRulesOptions {
  override?: boolean
}

interface CacheOptions {
  swr?: boolean
  name?: string
  group?: string
  integrity?: any
  maxAge?: number
  staleMaxAge?: number
  base?: string
  headersOnly?: boolean
}

// See https://www.jsdocs.io/package/h3#ProxyOptions
interface ProxyOptions {
  headers?: RequestHeaders | HeadersInit;
  fetchOptions?: RequestInit & { duplex?: Duplex } & {
    ignoreResponseError?: boolean;
  };
  fetch?: typeof fetch;
  sendStream?: boolean;
  streamRequest?: boolean;
  cookieDomainRewrite?: string | Record<string, string>;
  cookiePathRewrite?: string | Record<string, string>;
  onResponse?: (event: H3Event, response: Response) => void;
}

参数

`route`

类型: string

必需: true

一个要匹配的路由模式。

`rule`

类型: NitroRouteConfig

必需: true

一个要应用到匹配路由的路由配置。

`options`

类型: ExtendRouteRulesOptions

默认值: {}

传递给路由配置的选项。如果 override 设置为 true，它将覆盖具有相同名称的现有路由配置。

示例

// https://github.com/directus/website/blob/main/modules/redirects.ts
import { createResolver, defineNuxtModule, extendRouteRules, extendPages } from '@nuxt/kit'

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

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

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

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

`addRouteMiddleware`

注册路由中间件，以便所有路由或特定路由可用。

路由中间件也可以在插件中通过 addRouteMiddleware 组合体定义。

在路由中间件文档中阅读更多关于路由中间件的信息。

观看 Vue School 关于添加路由规则和路由中间件的视频。

类型

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

type NuxtMiddleware = {
  name: string
  path: string
  global?: boolean
}

interface AddRouteMiddlewareOptions {
  override?: boolean
  prepend?: boolean
}

参数

`input`

类型: NuxtMiddleware | NuxtMiddleware[]

必需: true

一个中间件对象或中间件对象的数组，具有以下属性：

name (必需)
类型: string
中间件名称。
path (必需)
类型: string
中间件路径。
global (可选)
类型: boolean
如果启用，注册中间件以在所有路由中可用。

`options`

类型: AddRouteMiddlewareOptions

默认值: {}

override (optional)
类型: boolean
默认值: false
如果启用，则覆盖具有相同名称的现有中间件。
prepend (optional)
类型: boolean
默认值: false
如果启用，则将中间件添加到现有中间件列表中。

示例

export default defineNuxtRouteMiddleware((to, from) => {
  // isAuthenticated() 是一个示例方法，验证用户是否已认证
  if (to.path !== '/login' && isAuthenticated() === false) {
    return navigateTo('/login')
  }
})

上下文

Nuxt Kit 提供了一系列实用工具来帮助你处理上下文。

布局

Nuxt Kit 提供了一系列实用工具来帮助您处理布局。