页面
Nuxt Kit 提供了一组实用程序，可帮助您创建和使用页面。您可以使用这些实用程序来操作页面配置或定义路由规则。
extendPages
在 Nuxt 3 中，路由是根据 pages 目录中文件的结构自动生成的。但是，在某些情况下，您可能需要自定义这些路由。例如，您可能需要为 Nuxt 未生成的动态页面添加路由、删除现有路由或修改路由的配置。对于此类自定义，Nuxt 提供了 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
一个将使用页面配置调用的函数。您可以通过添加、删除或修改其元素来更改此数组。注意：您应该直接修改提供的 pages 数组，因为对复制数组所做的更改不会反映在配置中。
示例
// 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
}
// See 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
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() is an example method verifying if a user is authenticated
if (to.path !== '/login' && isAuthenticated() === false) {
return navigateTo('/login')
}
})