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')
}
})