v3
GitHub

页面

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

extendPages

在 Nuxt 中，路由是根据 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：一个函数，将接收页面配置数组。你可以通过添加、删除或修改其元素来改变页面配置。注意：应该直接修改传入的 pages 数组，复制数组上的修改不会反映到配置中。

属性类型是否必需描述
namestringfalse路由名称。用于编程式导航和识别路由。
pathstringfalse路由的 URL 路径。若未设置，Nuxt 会根据文件位置推断。
filestringfalse作为路由组件使用的 Vue 文件路径。
metaRecord<string, any>false自定义路由元数据。可用于布局、中间件或导航守卫。
aliasstring[] | stringfalse路由的一个或多个别名路径。支持多个网址。
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'),
      global: true,
    }, { prepend: true })
  },
})

类型

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

参数

input：中间件对象或中间件数组，包含以下属性：

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

options：带有以下属性的对象：

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