v3.16
Nuxt on GitHub

页面

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

extendPages

在 Nuxt 中，路由会根据 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
}

// 查看 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（可选）
    类型: boolean
    默认值: false
    如果启用，将覆盖具有相同名称的现有中间件。
  • prepend（可选）
    类型: boolean
    默认值: false
    如果启用，将中间件添加到现有中间件列表的前面。

示例

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