頁面
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
一個將使用頁面設定呼叫的函式。您可以透過新增、刪除或修改其元素來變更此陣列。注意：您應該直接修改提供的頁面陣列，因為對複製陣列所做的變更不會反映在設定中。
範例
// 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 composable 在外掛程式中定義。
在路由中介軟體文件中閱讀更多關於路由中介軟體的資訊。
類型
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')
}
})