v3.17
GitHub

页面

源代码
Nuxt Kit 提供了一组实用工具，帮助您创建和使用页面。您可以使用这些工具来操作页面配置或定义路由规则。

extendPages

在 Nuxt 中，路由是根据 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: 一个函数，它将在页面配置上被调用。您可以通过添加、删除或修改其元素来更改该数组。注意: 您应该直接修改提供的页面数组，因为对复制数组所做的更改不会反映在配置中。

属性类型必需描述
namestringfalse路由的名称。对程序化导航和识别路由很有用。
pathstringfalse路由的 URL 路径。如果未设置，Nuxt 将从文件位置推断。
filestringfalse应用作路由组件的 Vue 文件的路径。
metaRecord<string, any>false路由的自定义元数据。可以在布局、中间件或导航守卫中使用。
aliasstring[] | stringfalse一个或多个路由的别名路径。对支持多个 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，它将覆盖现有的路由配置。

名称类型默认值描述
overridebooleanfalse覆盖路由规则配置，默认值为 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.ts'),
      global: true,
    }, { prepend: true })
  },
})

类型

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

参数

input: 一个中间件对象或一个包含以下属性的中间件对象数组:

属性类型必需描述
namestringtrue中间件的名称。
pathstringtrue中间件的文件路径。
globalbooleanfalse如果设置为 true，中间件将应用于所有路由。

options: 一个具有以下属性的对象:

属性类型默认值描述
overridebooleanfalse如果 true，将替换具有相同名称的中间件。
prependbooleanfalse如果 true，将中间件添加到现有中间件之前。