Nuxt3 中文课程《实战全栈开发简书》限时优惠

Pages

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

extendPages

在 Nuxt 3 中,路由是根据 pages 目录中文件的结构自动生成的。然而,有时你可能需要自定义这些路由。例如,你可能需要为 Nuxt 未生成的动态页面添加一个路由,删除一个现有的路由,或者修改一个路由的配置。为了进行这样的自定义,Nuxt 3 提供了 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 路由规则的信息。

类型

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 组合函数定义。

路由中间件文档 中了解更多关于路由中间件的信息。

类型

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

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

interface AddRouteMiddlewareOptions {
  override?: boolean
}

参数

input

类型: NuxtMiddleware | NuxtMiddleware[]

必填: true

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

  • name (必填)
    类型: string
    中间件名称。
  • path (必填)
    类型: string
    中间件的路径。
  • global (可选)
    类型: boolean
    如果启用,注册中间件以对所有路由可用。

options

类型: AddRouteMiddlewareOptions

默认值: {}

要传递给中间件的选项。如果将 override 设置为 true,它将覆盖具有相同名称的现有中间件。

示例

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