Pages

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

`extendPages`

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

属性	类型	必填	描述
`name`	`string`	`false`	路由名称。对编程式导航和识别路由很有用。
`path`	`string`	`false`	路由的 URL 路径。如果未设置，Nuxt 会从文件位置推断。
`file`	`string`	`false`	应作为该路由组件的 Vue 文件路径。
`meta`	`NuxtPageMeta`	`false`	路由的自定义元数据。可在布局、中间件或导航守卫中使用。
`alias`	`string[] \| string`	`false`	路由的一个或多个别名路径。对支持多个 URL 很有用。
`redirect`	`RouteLocationRaw`	`false`	路由的重定向规则。支持具名路由、对象或字符串路径。
`children`	`NuxtPage[]`	`false`	该路由下的嵌套子路由，用于布局或视图嵌套。

为自定义页面元数据添加类型

你可以扩充 NuxtPageMeta 接口，在使用 extendPages 或 pages:extend 钩子时为页面添加类型安全的自定义元数据：

index.d.ts

declare module '@nuxt/schema' {
  interface NuxtPageMeta {
    requiresAuth?: boolean
  }
}

export {}

modules/auth.ts

import { defineNuxtModule, extendPages } from '@nuxt/kit'

export default defineNuxtModule({
  setup () {
    extendPages((pages) => {
      for (const page of pages) {
        // requiresAuth 现在被类型化为 boolean | undefined
        if (page.meta?.requiresAuth) {
          // ...
        }
      }
    })
  },
})

`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',
        status: 302,
      },
    })

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

类型

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

参数

route：一个要匹配的路由模式。 rule：要应用到匹配路由的路由规则配置。

关于路由规则配置，你可以在混合渲染 > 路由规则中获取更多细节。 :

options：传给路由配置的对象。如果 override 设为 true，它会覆盖已有的路由配置。

名称	类型	默认值	描述
`override`	`boolean`	`false`	覆盖路由规则配置，默认为 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 isAuthenticated (): boolean { return false }
// ---cut---
export default defineNuxtRouteMiddleware((to, from) => {
  // isAuthenticated() 是一个用于校验用户是否通过鉴权的示例方法
  if (to.path !== '/login' && isAuthenticated() === false) {
    return navigateTo('/login')
  }
})

类型

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

参数

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

属性	类型	必填	描述
`name`	`string`	`true`	中间件的名称。
`path`	`string`	`true`	中间件的文件路径。
`global`	`boolean`	`false`	如果设为 `true`，将中间件应用到所有路由。

options：一个包含以下属性的对象：

属性	类型	默认值	描述
`override`	`boolean`	`false`	如果为 `true`，替换同名中间件。
`prepend`	`boolean`	`false`	如果为 `true`，将中间件加到已有中间件之前。