Skip to main content
SvelteKit参考文档

@sveltejs/kit

import {
	class ServerServer,
	const VERSION: stringVERSION,
	function error(status: number, body: App.Error): never (+1 overload)
Throws an error with a HTTP status code and an optional message.
When called during request handling, this will cause SvelteKit to
return an error response without invoking handleError.
Make sure you’re not catching the thrown error, which would prevent SvelteKit from handling it.


@paramstatus The HTTP status code. Must be in the range 400-599.
@parambody An object that conforms to the App.Error type. If a string is passed, it will be used as the message property.
@throwsHttpError This error instructs SvelteKit to initiate HTTP error handling.
@throwsError If the provided status is invalid (not between 400 and 599).
error,
	function fail(status: number): ActionFailure<undefined> (+1 overload)
Create an ActionFailure object.


@paramstatus The HTTP status code. Must be in the range 400-599.
fail,
	function isActionFailure(e: unknown): e is ActionFailure
Checks whether this is an action failure thrown by 
{@link 
fail
}
.


@parame The object to check.
isActionFailure,
	
function isHttpError<T extends number>(e: unknown, status?: T | undefined): e is (HttpError_1 & {
    status: T extends undefined ? never : T;
})
Checks whether this is an error thrown by 
{@link 
error
}
.


@paramstatus The status to filter for.
isHttpError,
	function isRedirect(e: unknown): e is Redirect_1
Checks whether this is a redirect thrown by 
{@link 
redirect
}
.


@parame The object to check.
isRedirect,
	function json(data: any, init?: ResponseInit | undefined): Response
Create a JSON Response object from the supplied data.


@paramdata The value that will be serialized as JSON.
@paraminit Options such as status and headers that will be added to the response. Content-Type: application/json and Content-Length headers will be added automatically.
json,
	function redirect(status: 300 | 301 | 302 | 303 | 304 | 305 | 306 | 307 | 308 | ({} & number), location: string | URL): never
Redirect a request. When called during request handling, SvelteKit will return a redirect response.
Make sure you’re not catching the thrown redirect, which would prevent SvelteKit from handling it.


@paramstatus The HTTP status code. Must be in the range 300-308.
@paramlocation The location to redirect to.
@throwsRedirect This error instructs SvelteKit to redirect to the specified location.
@throwsError If the provided status is invalid.
redirect,
	function text(body: string, init?: ResponseInit | undefined): Response
Create a Response object from the supplied body.


@parambody The value that will be used as-is.
@paraminit Options such as status and headers that will be added to the response. A Content-Length header will be added automatically.
text
} from '@sveltejs/kit';

Server

class Server {…}
constructor(manifest: SSRManifest);
init(options: ServerInitOptions): Promise<void>;
respond(request: Request, options: RequestOptions): Promise<Response>;

VERSION

const VERSION: string;

error

抛出一个带有 HTTP 状态码和可选消息的错误。在请求处理期间调用时，这将导致 SvelteKit 返回一个错误响应而不会调用 handleError。 确保您没有捕获抛出的错误，否则会阻止 SvelteKit 处理它。

function error(status: number, body: App.Error): never;
function error(
	status: number,
	body?: {
		message: string;
	} extends App.Error
		? App.Error | string | undefined
		: never
): never;

fail

创建一个 ActionFailure 对象。

function fail(status: number): ActionFailure<undefined>;
function fail<
	T extends Record<string, unknown> | undefined = undefined
>(status: number, data: T): ActionFailure<T>;

isActionFailure

检查这是否是由 fail 抛出的 action 失败。

function isActionFailure(e: unknown): e is ActionFailure;

isHttpError

检查这是否是由 error 抛出的错误。

function isHttpError<T extends number>(
	e: unknown,
	status?: T | undefined
): e is HttpError_1 & {
	status: T extends undefined ? never : T;
};

isRedirect

检查这是否是由 redirect 抛出的重定向。

function isRedirect(e: unknown): e is Redirect_1;

json

从提供的数据创建一个 JSON Response 对象。

function json(
	data: any,
	init?: ResponseInit | undefined
): Response;

redirect

重定向一个请求。在请求处理期间调用时，SvelteKit 将返回一个重定向响应。确保您没有捕获抛出的重定向，否则会阻止 SvelteKit 处理它。

function redirect(
	status:
		| 300
		| 301
		| 302
		| 303
		| 304
		| 305
		| 306
		| 307
		| 308
		| ({} & number),
	location: string | URL
): never;

text

从提供的正文创建一个 Response 对象。

function text(
	body: string,
	init?: ResponseInit | undefined
): Response;

Action

位于 +page.server.js 的 export const actions = {..} 中的表单 action 方法的形状。

更多信息请参见 表单 action 。

type Action<
	Params extends Partial<Record<string, string>> = Partial<
		Record<string, string>
	>,
	OutputData extends Record<string, any> | void = Record<
		string,
		any
	> | void,
	RouteId extends string | null = string | null
> = (
	event: RequestEvent<Params, RouteId>
) => MaybePromise<OutputData>;

ActionFailure

interface ActionFailure<
	T extends Record<string, unknown> | undefined = undefined
> {…}
status: number;
data: T;
[uniqueSymbol]: true;

ActionResult

通过 fetch 调用表单 action 时，响应将具有以下形状之一。

<form method="post" use:enhance={() => {
	return ({ result }) => {
		// result is of type ActionResult
	};
}}
type ActionResult<
	Success extends
		| Record<string, unknown>
		| undefined = Record<string, any>,
	Failure extends
		| Record<string, unknown>
		| undefined = Record<string, any>
> =
	| { type: 'success'; status: number; data?: Success }
	| { type: 'failure'; status: number; data?: Failure }
	| { type: 'redirect'; status: number; location: string }
	| { type: 'error'; status?: number; error: any };

Actions

位于 +page.server.js 的 export const actions = {..} 中的表单 action 方法的形状。更多信息请参见 表单 action 。

type Actions<
	Params extends Partial<Record<string, string>> = Partial<
		Record<string, string>
	>,
	OutputData extends Record<string, any> | void = Record<
		string,
		any
	> | void,
	RouteId extends string | null = string | null
> = Record<string, Action<Params, OutputData, RouteId>>;

Adapter

适配器 负责将生产构建转换为可以部署到您选择的平台的形式。

interface Adapter {…}
name: string;

适配器的名称，用于记录。通常对应于包名称。

adapt(builder: Builder): MaybePromise<void>;
  • builder 由 SvelteKit 提供的对象，包含适配应用的各种方法

此函数在 SvelteKit 构建您的应用之后调用。

supports?: {…}

在开发和构建期间调用的检查，以确定此适配器的特定功能是否将在生产中工作。

read?: (details: { config: any; route: { id: string } }) => boolean;
  • config 合并后的路由配置

测试 read 是否支持来自 $app/server 的内容

emulate?(): MaybePromise<Emulator>;

创建一个 Emulator，允许适配器在开发、构建和预渲染期间影响环境。

AfterNavigate

传递给 afterNavigate 回调的参数。

interface AfterNavigate extends Omit<Navigation, 'type'> {…}
type: Exclude<NavigationType, 'leave'>;

导航的类型：

  • enter：应用已水合
  • form：用户提交了一个 <form>
  • link：导航由链接点击触发
  • goto：导航由 goto(...) 调用或重定向触发
  • popstate：导航由后退/前进导航触发
willUnload: false;

由于 afterNavigate 回调在导航完成后调用，因此它们永远不会与卸载页面的导航一起调用。

AwaitedActions

type AwaitedActions<
	T extends Record<string, (...args: any) => any>
> = OptionalUnion<
	{
		[Key in keyof T]: UnpackValidationError<
			Awaited<ReturnType<T[Key]>>
		>;
	}[keyof T]
>;

BeforeNavigate

传递给 beforeNavigate 回调的参数。

interface BeforeNavigate extends Navigation {…}
cancel(): void;

调用此方法以阻止导航的开始。

Builder

此对象传递给适配器的 adapt 函数。 它包含各种用于适配应用的方法和属性。

interface Builder {…}
log: Logger;

将消息打印到控制台。除非 Vite 的 logLevel 为 info，否则 log.info 和 log.minor 是静默的。

rimraf(dir: string): void;

移除 dir 及其所有内容。

mkdirp(dir: string): void;

创建 dir 及其任何所需的父目录。

config: ValidatedConfig;

完全解析的 svelte.config.js。

prerendered: Prerendered;

预渲染页面和资产的信息（如果有的话）。

routes: RouteDefinition[];

所有路由的数组（包括预渲染的）

createEntries(fn: (route: RouteDefinition) => AdapterEntry): Promise<void>;
  • fn 将一组路由分组为一个入口点的函数
  • 已弃用 使用 builder.routes 代替

创建映射到应用一个或多个路由的独立函数。

findServerAssets(routes: RouteDefinition[]): string[];

查找属于 routes 的服务器文件导入的所有资产

generateFallback(dest: string): Promise<void>;

为静态网页服务器生成一个回退页面，以在没有匹配路由时使用。适用于单页应用。

generateEnvModule(): void;

生成一个模块，将构建时的环境变量暴露为 $env/dynamic/public。

generateManifest(opts: { relativePath: string; routes?: RouteDefinition[] }): string;
  • opts 应用的基目录的相对路径，并可选择指定（esm 或 cjs）生成清单的格式

生成一个服务器端清单，用于初始化 SvelteKit 的 服务器。

getBuildDirectory(name: string): string;
  • name 文件的路径，相对于构建目录

解析 outDir 内 name 目录的路径，例如 /path/to/.svelte-kit/my-adapter。

getClientDirectory(): string;

获取包含客户端资产的目录的完全解析路径，包括您的 static 目录的内容。

getServerDirectory(): string;

获取包含服务器端代码的目录的完全解析路径。

getAppPath(): string;

获取包括任何配置的 base 路径的应用路径，例如 my-base-path/_app。

writeClient(dest: string): string[];
  • dest 目标文件夹
  • 返回 写入 dest 的文件数组

将客户端资产写入 dest。

writePrerendered(dest: string): string[];
  • dest 目标文件夹
  • 返回 写入 dest 的文件数组

将预渲染的文件写入 dest。

writeServer(dest: string): string[];
  • dest 目标文件夹
  • 返回 写入 dest 的文件数组

将服务器端代码写入 dest。

copy(
	from: string,
	to: string,
	opts?: {
		filter?(basename: string): boolean;
		replace?: Record<string, string>;
	}
): string[];
  • from 源文件或目录
  • to 目标文件或目录
  • opts.filter 一个函数，用于确定是否应该复制文件或目录
  • opts.replace 一个字符串替换映射
  • 返回 被复制的文件数组

复制一个文件或目录。

compress(directory: string): Promise<void>;
  • directory 包含要压缩文件的目录

使用 gzip 和 brotli 压缩 directory 中的文件（在适当情况下）。在原始文件旁边生成 .gz 和 .br 文件。

ClientInit

自 2.10.0 起可用

init 将在应用在浏览器中启动后调用一次。

type ClientInit = () => MaybePromise<void>;

Config

有关详细信息，请参见配置参考。

Cookies

interface Cookies {…}
get(name: string, opts?: import('cookie').CookieParseOptions): string | undefined;
  • name cookie 的名称
  • opts 选项，直接传递给 cookie.parse。请参阅 文档

获取以前用 cookies.set 设置的 cookie，或来自请求头的 cookie。

getAll(opts?: import('cookie').CookieParseOptions): Array<{ name: string; value: string }>;
  • opts 选项，直接传递给 cookie.parse。请参阅 文档

获取以前用 cookies.set 设置的所有 cookie，或来自请求头的 cookie。

set(
	name: string,
	value: string,
	opts: import('cookie').CookieSerializeOptions & { path: string }
): void;
  • name cookie 的名称
  • value cookie 的值
  • opts 选项，直接传递给 cookie.serialize。请参阅 文档

设置一个 cookie。这将向响应添加一个 set-cookie 头，但也会使 cookie 在当前请求期间通过 cookies.get 或 cookies.getAll 可用。

httpOnly 和 secure 选项默认值为 true（除非在 http://localhost 上，secure 为 false），如果您希望 cookie 可以被客户端 JavaScript 读取和/或通过 HTTP 传输，必须显式禁用它们。sameSite 选项默认为 lax。

您必须为 cookie 指定一个 path。在大多数情况下，您应该明确设置 path: '/' 以使 cookie 在整个应用中可用。您可以使用相对路径，或者设置 path: '' 仅使 cookie 在当前路径及其子路径中可用。

delete(name: string, opts: import('cookie').CookieSerializeOptions & { path: string }): void;
  • name cookie 的名称
  • opts 选项，直接传递给 cookie.serialize。path 必须匹配您想要删除的 cookie 的路径。请参阅 文档

通过将其值设为空字符串并将过期日期设为过去，删除一个 cookie。

您必须为 cookie 指定一个 path。在大多数情况下，您应该明确设置 path: '/' 以使 cookie 在整个应用中可用。您可以使用相对路径，或者设置 path: '' 仅使 cookie 在当前路径及其子路径中可用。

serialize(
	name: string,
	value: string,
	opts: import('cookie').CookieSerializeOptions & { path: string }
): string;
  • name cookie 的名称
  • value cookie 的值
  • opts 选项，直接传递给 cookie.serialize。请参阅 文档

将 cookie 名称-值对序列化为 Set-Cookie 头字符串，但不应用于响应。

httpOnly 和 secure 选项默认值为 true（除非在 http://localhost 上，secure 为 false），如果您希望 cookie 可以被客户端 JavaScript 读取和/或通过 HTTP 传输，必须显式禁用它们。sameSite 选项默认为 lax。

您必须为 cookie 指定一个 path。在大多数情况下，您应该明确设置 path: '/' 以使 cookie 在整个应用中可用。您可以使用相对路径，或者设置 path: '' 仅使 cookie 在当前路径及其子路径中可用。

Emulator

一组在开发、构建和预渲染期间影响环境的函数集合。

interface Emulator {…}
platform?(details: { config: any; prerender: PrerenderOption }): MaybePromise<App.Platform>;

一个函数，接收当前路由的 config 和 prerender 选项，并返回一个 App.Platform 对象。

Handle

handle 钩子在 SvelteKit 服务器每次接收到一个 请求 时运行，并确定 响应。 它接收一个表示请求的 event 对象和一个名为 resolve 的函数，该函数渲染路由并生成一个 Response。 这允许您修改响应头或主体，或完全绕过 SvelteKit（例如，用于以编程方式实现路由）。

type Handle = (input: {
	event: RequestEvent;
	resolve(
		event: RequestEvent,
		opts?: ResolveOptions
	): MaybePromise<Response>;
}) => MaybePromise<Response>;

HandleClientError

客户端 handleError 钩子在导航过程中抛出意外错误时运行。

如果在加载或随后的渲染过程中抛出意外错误，此函数将使用错误和事件调用。 确保此函数 永远 不会抛出错误。

type HandleClientError = (input: {
	error: unknown;
	event: NavigationEvent;
	status: number;
	message: string;
}) => MaybePromise<void | App.Error>;

HandleFetch

handleFetch 钩子允许您修改（或替换）在服务器上运行的 load 函数中发生的 fetch 请求（或在预渲染期间）。

type HandleFetch = (input: {
	event: RequestEvent;
	request: Request;
	fetch: typeof fetch;
}) => MaybePromise<Response>;

HandleServerError

服务器端 handleError 钩子在响应请求时抛出意外错误时运行。

如果在加载或渲染过程中抛出意外错误，此函数将使用错误和事件调用。 确保此函数 永远 不会抛出错误。

type HandleServerError = (input: {
	error: unknown;
	event: RequestEvent;
	status: number;
	message: string;
}) => MaybePromise<void | App.Error>;

HttpError

error 函数返回的对象。

interface HttpError {…}
status: number;

HTTP 状态码，范围在 400-599 之间。

body: App.Error;

错误的内容。

KitConfig

有关详细信息，请参见配置参考。

LessThan

type LessThan<
	TNumber extends number,
	TArray extends any[] = []
> = TNumber extends TArray['length']
	? TArray[number]
	: LessThan<TNumber, [...TArray, TArray['length']]>;

Load

PageLoad 和 LayoutLoad 的通用形式。您应该从 ./$types 导入它们（参见生成的类型），而不是直接使用 Load。

type Load<
	Params extends Partial<Record<string, string>> = Partial<
		Record<string, string>
	>,
	InputData extends Record<string, unknown> | null = Record<
		string,
		any
	> | null,
	ParentData extends Record<string, unknown> = Record<
		string,
		any
	>,
	OutputData extends Record<
		string,
		unknown
	> | void = Record<string, any> | void,
	RouteId extends string | null = string | null
> = (
	event: LoadEvent<Params, InputData, ParentData, RouteId>
) => MaybePromise<OutputData>;

LoadEvent

PageLoadEvent 和 LayoutLoadEvent 的通用形式。您应该从 ./$types 导入它们（参见生成的类型），而不是直接使用 LoadEvent。

interface LoadEvent<
	Params extends Partial<Record<string, string>> = Partial<
		Record<string, string>
	>,
	Data extends Record<string, unknown> | null = Record<
		string,
		any
	> | null,
	ParentData extends Record<string, unknown> = Record<
		string,
		any
	>,
	RouteId extends string | null = string | null
> extends NavigationEvent<Params, RouteId> {…}
fetch: typeof fetch;

fetch 等同于 原生 fetch Web API，具有一些附加功能：

  • 它可以在服务器上用于进行带凭证的请求，因为它继承了页面请求的 cookie 和 authorization 头。
  • 它可以在服务器上进行相对请求（通常，fetch 在服务器上下文中使用时需要带有源的 URL）。
  • 内部请求（例如，用于 +server.js 路由）在服务器上运行时直接进入处理函数，而无需 HTTP 调用的开销。
  • 在服务器端渲染期间，通过钩入 Response 对象的 text 和 json 方法，响应将被捕获并内联到渲染的 HTML 中。注意，除非通过 filterSerializedResponseHeaders 显式包含，否则头部将 不会 被序列化。
  • 在水合过程中，响应将从 HTML 中读取，确保一致性并防止额外的网络请求。

您可以在这里了解更多关于使用 cookies 进行带凭证请求的信息。

data: Data;

包含路由的服务器 load 函数（在 +layout.server.js 或 +page.server.js 中）返回的数据（如果有）。

setHeaders(headers: Record<string, string>): void;

如果您需要为响应设置头，可以使用此方法。这在您希望页面被缓存时特别有用，例如：

src/routes/blog/+page
export async function 
function load({ fetch, setHeaders }: {
    fetch: any;
    setHeaders: any;
}): Promise<any>
load({ fetch, setHeaders }) {

	const const url: "https://cms.example.com/articles.json"url = `https://cms.example.com/articles.json`;
	const const response: anyresponse = await fetch: anyfetch(const url: "https://cms.example.com/articles.json"url);

	setHeaders: anysetHeaders({
		age: anyage: const response: anyresponse.headers.get('age'),
		'cache-control': const response: anyresponse.headers.get('cache-control')
	});

	return const response: anyresponse.json();
}

在多个 load 函数中多次设置相同的头（即使在不同的 load 函数中）也是错误的——您只能设置每个头一次。

您不能使用 setHeaders 添加 set-cookie 头——请改用服务器端 load 函数中的 cookies API。

当 load 函数在浏览器中运行时，setHeaders 无效。

parent(): Promise<ParentData>;

await parent() 返回来自父级 +layout.js load 函数的数据。 隐式地，缺失 +layout.js 被视为一个 ({ data }) => data 函数，这意味着它将返回并转发来自父级 +layout.server.js 文件的数据。

当使用 await parent() 时，请注意不要引入意外的瀑布。如果例如，您只想将父级数据合并到返回的输出中，请在获取其他数据后调用它。

depends(...deps: Array<`${string}:${string}`>): void;

此函数声明 load 函数对一个或多个 URL 或自定义标识符有 依赖，这些依赖随后可以与 invalidate() 一起使用，导致 load 函数重新运行。

大多数情况下您不需要这样做，因为 fetch 会代表您调用 depends——只有在您使用绕过 fetch 的自定义 API 客户端时才需要。

URL 可以是绝对的或相对于正在加载的页面，并且必须是编码的。

自定义标识符必须以一个或多个小写字母后跟冒号作为前缀，以符合 URI 规范。

以下示例展示了如何使用 depends 注册对一个自定义标识符的依赖，该标识符在按钮点击后被 invalidate，使得 load 函数重新运行。

src/routes/+page
let let count: numbercount = 0;
export async function 
function load({ depends }: {
    depends: any;
}): Promise<{
    count: number;
}>
load({ depends }) {
	depends: anydepends('increase:count');

	return { count: numbercount: let count: numbercount++ };
}
src/routes/+page
<script>
	import { invalidate } from '$app/navigation';

	let { data } = $props();

	const increase = async () => {
		await invalidate('increase:count');
	};
</script>

<p>{data.count}</p>
<p>
	<button on:click="{increase}">Increase Count</button>
</p>
untrack<T>(fn: () => T): T;

使用此函数可选择退出依赖跟踪，针对在回调中同步调用的所有内容。例如：

src/routes/+page.server
export async function 
function load({ untrack, url }: {
    untrack: any;
    url: any;
}): Promise<{
    message: string;
} | undefined>
load({ untrack, url }) {

	// 取消跟踪 url.pathname，以便路径更改不会触发重新运行
	if (untrack: anyuntrack(() => url: anyurl.pathname === '/')) {
		return { message: stringmessage: 'Welcome!' };
	}
}

LoadProperties

type LoadProperties<
	input extends Record<string, any> | void
> = input extends void
	? undefined // needs to be undefined, because void will break intellisense
	: input extends Record<string, any>
		? input
		: unknown;
interface Navigation {…}
from: NavigationTarget | null;

导航的来源

to: NavigationTarget | null;

导航的目标/已导航到的地方

type: Exclude<NavigationType, 'enter'>;

导航的类型：

  • form：用户提交了一个 <form>
  • leave：应用正在离开，因为标签页正在关闭或导航到不同的文档
  • link：导航由链接点击触发
  • goto：导航由 goto(...) 调用或重定向触发
  • popstate：导航由后退/前进导航触发
willUnload: boolean;

导航是否会导致页面卸载（即不是客户端导航）

delta?: number;

在历史记录后退/前进导航的情况下，后退/前进的步骤数

complete: Promise<void>;

一个在导航完成后解析的 promise，如果导航失败或被中止则拒绝。 在 willUnload 导航的情况下，promise 将永远不会解析。

interface NavigationEvent<
	Params extends Partial<Record<string, string>> = Partial<
		Record<string, string>
	>,
	RouteId extends string | null = string | null
> {…}
params: Params;

当前页面的参数，例如对于 /blog/[slug] 路由，一个 { slug: string } 对象

route: {…}

关于当前路由的信息

id: RouteId;

当前路由的 ID，例如对于 src/routes/blog/[slug]，它将是 /blog/[slug]

url: URL;

当前页面的 URL

关于特定导航目标的信息。

interface NavigationTarget {…}
params: Record<string, string> | null;

目标页面的参数，例如对于 /blog/[slug] 路由，一个 { slug: string } 对象。 如果目标不是 SvelteKit 应用的一部分（无法解析为路由），则为 null。

route: { id: string | null };

目标路由的信息

url: URL;

要导航到的 URL

  • enter：应用已水合
  • form：用户提交了一个带有 GET 方法的 <form>
  • leave：用户通过关闭标签页或使用后退/前进按钮导航到不同的文档而离开应用
  • link：导航由链接点击触发
  • goto：导航由 goto(...) 调用或重定向触发
  • popstate：导航由后退/前进导航触发
type NavigationType =
	| 'enter'
	| 'form'
	| 'leave'
	| 'link'
	| 'goto'
	| 'popstate';

NumericRange

type NumericRange<
	TStart extends number,
	TEnd extends number
> = Exclude<TEnd | LessThan<TEnd>, LessThan<TStart>>;

OnNavigate

传递给 onNavigate 回调的参数。

interface OnNavigate extends Navigation {…}
type: Exclude<NavigationType, 'enter' | 'leave'>;

导航的类型：

  • form：用户提交了一个 <form>
  • link：导航由链接点击触发
  • goto：导航由 goto(...) 调用或重定向触发
  • popstate：导航由后退/前进导航触发
willUnload: false;

由于 onNavigate 回调立即在客户端导航之前调用，它们永远不会与卸载页面的导航一起调用。

Page

$page store 的形状

interface Page<
	Params extends Record<string, string> = Record<
		string,
		string
	>,
	RouteId extends string | null = string | null
> {…}
url: URL;

当前页面的 URL

params: Params;

当前页面的参数，例如对于 /blog/[slug] 路由，一个 { slug: string } 对象

route: {…}

关于当前路由的信息

id: RouteId;

当前路由的 ID，例如对于 src/routes/blog/[slug]，它将是 /blog/[slug]

status: number;

当前页面的 HTTP 状态码

error: App.Error | null;

当前页面的错误对象（如果有的话）。来自 handleError 钩子填充。

data: App.PageData & Record<string, any>;

当前页面所有 load 函数的数据的合并结果。您可以通过 App.PageData 类型一个共同的分母。

state: App.PageState;

页面状态，可以通过 $app/navigation 的 pushState 和 replaceState 函数进行操作。

form: any;

仅在表单提交后填充。更多信息请参见 表单 action 。

ParamMatcher

参数匹配器的形状。更多信息请参见 匹配。

type ParamMatcher = (param: string) => boolean;

PrerenderOption

type PrerenderOption = boolean | 'auto';

Redirect

redirect 函数返回的对象

interface Redirect {…}
status: 300 | 301 | 302 | 303 | 304 | 305 | 306 | 307 | 308;

HTTP 状态码，范围在 300-308 之间。

location: string;

要重定向到的位置。

RequestEvent

interface RequestEvent<
	Params extends Partial<Record<string, string>> = Partial<
		Record<string, string>
	>,
	RouteId extends string | null = string | null
> {…}
cookies: Cookies;

获取或设置与当前请求相关的 cookie

fetch: typeof fetch;

fetch 等同于 原生 fetch Web API，具有一些附加功能：

  • 它可以在服务器上用于进行带凭证的请求，因为它继承了页面请求的 cookie 和 authorization 头。
  • 它可以在服务器上进行相对请求（通常，fetch 在服务器上下文中使用时需要带有源的 URL）。
  • 内部请求（例如，用于 +server.js 路由）在服务器上运行时直接进入处理函数，而无需 HTTP 调用的开销。
  • 在服务器端渲染期间，通过钩入 Response 对象的 text 和 json 方法，响应将被捕获并内联到渲染的 HTML 中。注意，除非通过 filterSerializedResponseHeaders 显式包含，否则头部将 不会 被序列化。
  • 在水合过程中，响应将从 HTML 中读取，确保一致性并防止额外的网络请求。

您可以在这里了解更多关于使用 cookies 进行带凭证请求的信息。

getClientAddress(): string;

客户端的 IP 地址，由适配器设置。

locals: App.Locals;

包含在 server handle hook 中向请求添加的自定义数据。

params: Params;

当前路由的参数，例如对于 /blog/[slug] 路由，一个 { slug: string } 对象

platform: Readonly<App.Platform> | undefined;

通过适配器提供的额外数据。

request: Request;

原始请求对象

route: {…}

关于当前路由的信息

id: RouteId;

当前路由的 ID，例如对于 src/routes/blog/[slug]，它将是 /blog/[slug]

setHeaders(headers: Record<string, string>): void;

如果您需要为响应设置头，可以使用此方法。这在您希望页面被缓存时特别有用，例如：

src/routes/blog/+page
export async function 
function load({ fetch, setHeaders }: {
    fetch: any;
    setHeaders: any;
}): Promise<any>
load({ fetch, setHeaders }) {

	const const url: "https://cms.example.com/articles.json"url = `https://cms.example.com/articles.json`;
	const const response: anyresponse = await fetch: anyfetch(const url: "https://cms.example.com/articles.json"url);

	setHeaders: anysetHeaders({
		age: anyage: const response: anyresponse.headers.get('age'),
		'cache-control': const response: anyresponse.headers.get('cache-control')
	});

	return const response: anyresponse.json();
}

在多个 load 函数中多次设置相同的头（即使在不同的 load 函数中）也是错误的——您只能设置每个头一次。

您不能使用 setHeaders 添加 set-cookie 头——请改用服务器端 load 函数中的 cookies API。

url: URL;

请求的 URL。

isDataRequest: boolean;

如果请求来自客户端询问 +page/layout.server.js 数据，则为 true。在这种情况下，url 属性将被移除与数据请求相关的内部信息。 如果这种区别对您很重要，请使用此属性。

isSubRequest: boolean;

如果请求是来自 SvelteKit 的 +server.js 调用，则为 true，无需实际进行 HTTP 请求。这发生在服务器上进行同源 fetch 请求时。

RequestHandler

一个从 +server.js 文件导出的 (event: RequestEvent) => Response 函数，它对应于一个 HTTP 动词 (GET, PUT, PATCH 等)，并处理具有该方法的请求。

它接收 Params 作为第一个泛型参数，您可以通过使用 生成的类型 来跳过它。

type RequestHandler<
	Params extends Partial<Record<string, string>> = Partial<
		Record<string, string>
	>,
	RouteId extends string | null = string | null
> = (
	event: RequestEvent<Params, RouteId>
) => MaybePromise<Response>;

Reroute

自 2.3.0 起可用

reroute 钩子允许您在用于确定要渲染哪个路由之前修改 URL。

type Reroute = (event: { url: URL }) => void | string;

ResolveOptions

interface ResolveOptions {…}
transformPageChunk?(input: { html: string; done: boolean }): MaybePromise<string | undefined>;
  • input html 块和是否是最后一个块的信息

对 HTML 进行自定义转换。如果 done 为 true，则是最后一个块。块不保证是完整的 HTML（例如，它们可能包含一个元素的开始标签但不包含结束标签），但它们总是会在诸如 %sveltekit.head% 或布局/页面组件等合理的边界处拆分。

filterSerializedResponseHeaders?(name: string, value: string): boolean;
  • name 头名称
  • value 头值

确定在 load 函数使用 fetch 加载资源时，哪些头应包含在序列化的响应中。 默认情况下，不会包含任何头。

preload?(input: { type: 'font' | 'css' | 'js' | 'asset'; path: string }): boolean;
  • input 文件的类型和路径

确定应添加到 <head> 标签以预加载的内容。 默认情况下，js 和 css 文件将被预加载。

RouteDefinition

interface RouteDefinition<Config = any> {…}
id: string;
api: {
	methods: Array<HttpMethod | '*'>;
};
page: {
	methods: Array<Extract<HttpMethod, 'GET' | 'POST'>>;
};
pattern: RegExp;
prerender: PrerenderOption;
segments: RouteSegment[];
methods: Array<HttpMethod | '*'>;
config: Config;

SSRManifest

interface SSRManifest {…}
appDir: string;
appPath: string;
assets: Set<string>;
mimeTypes: Record<string, string>;
_: {…}

私有字段

client: NonNullable<BuildData['client']>;
nodes: SSRNodeLoader[];
routes: SSRRoute[];
matchers(): Promise<Record<string, ParamMatcher>>;
server_assets: Record<string, number>;

所有由服务器代码导入的资产的 [file]: size 映射

ServerInit

自 2.10.0 起可用

init 将在服务器响应其第一个请求之前调用。

type ServerInit = () => MaybePromise<void>;

ServerInitOptions

interface ServerInitOptions {…}
env: Record<string, string>;

环境变量的映射

read?: (file: string) => ReadableStream;

一个将资产文件名转换为 ReadableStream 的函数。对于 $app/server 的 read 导出，这个是必需的。

ServerLoad

PageServerLoad 和 LayoutServerLoad 的通用形式。您应该从 ./$types 导入它们（参见生成的类型），而不是直接使用 ServerLoad。

type ServerLoad<
	Params extends Partial<Record<string, string>> = Partial<
		Record<string, string>
	>,
	ParentData extends Record<string, any> = Record<
		string,
		any
	>,
	OutputData extends Record<string, any> | void = Record<
		string,
		any
	> | void,
	RouteId extends string | null = string | null
> = (
	event: ServerLoadEvent<Params, ParentData, RouteId>
) => MaybePromise<OutputData>;

ServerLoadEvent

interface ServerLoadEvent<
	Params extends Partial<Record<string, string>> = Partial<
		Record<string, string>
	>,
	ParentData extends Record<string, any> = Record<
		string,
		any
	>,
	RouteId extends string | null = string | null
> extends RequestEvent<Params, RouteId> {…}
parent(): Promise<ParentData>;

await parent() 返回来自父级 +layout.server.js load 函数的数据。

当使用 await parent() 时，请注意不要引入意外的瀑布。如果例如，您只想将父级数据合并到返回的输出中，请在获取其他数据后调用它。

depends(...deps: string[]): void;

此函数声明 load 函数对一个或多个 URL 或自定义标识符有 依赖，这些依赖随后可以与 invalidate() 一起使用，导致 load 函数重新运行。

大多数情况下您不需要这样做，因为 fetch 会代表您调用 depends——只有在您使用绕过 fetch 的自定义 API 客户端时才需要。

URL 可以是绝对的或相对于正在加载的页面，并且必须是编码的。

自定义标识符必须以一个或多个小写字母后跟冒号作为前缀，以符合 URI 规范。

以下示例展示了如何使用 depends 注册对一个自定义标识符的依赖，该标识符在按钮点击后被 invalidate，使得 load 函数重新运行。

src/routes/+page
let let count: numbercount = 0;
export async function 
function load({ depends }: {
    depends: any;
}): Promise<{
    count: number;
}>
load({ depends }) {
	depends: anydepends('increase:count');

	return { count: numbercount: let count: numbercount++ };
}
src/routes/+page
<script>
	import { invalidate } from '$app/navigation';

	let { data } = $props();

	const increase = async () => {
		await invalidate('increase:count');
	};
</script>

<p>{data.count}</p>
<p>
	<button on:click="{increase}">Increase Count</button>
</p>
untrack<T>(fn: () => T): T;

使用此函数可选择退出依赖跟踪，针对在回调中同步调用的所有内容。例如：

src/routes/+page
export async function 
function load({ untrack, url }: {
    untrack: any;
    url: any;
}): Promise<{
    message: string;
} | undefined>
load({ untrack, url }) {

	// 取消跟踪 url.pathname，以便路径更改不会触发重新运行
	if (untrack: anyuntrack(() => url: anyurl.pathname === '/')) {
		return { message: stringmessage: 'Welcome!' };
	}
}

Snapshot

导出自页面或布局组件的 export const snapshot 的类型。

interface Snapshot<T = any> {…}
capture: () => T;
restore: (snapshot: T) => void;

SubmitFunction

type SubmitFunction<
	Success extends
		| Record<string, unknown>
		| undefined = Record<string, any>,
	Failure extends
		| Record<string, unknown>
		| undefined = Record<string, any>
> = (input: {
	action: URL;
	formData: FormData;
	formElement: HTMLFormElement;
	controller: AbortController;
	submitter: HTMLElement | null;
	cancel(): void;
}) => MaybePromise<
	| void
	| ((opts: {
			formData: FormData;
			formElement: HTMLFormElement;
			action: URL;
			result: ActionResult<Success, Failure>;
			/**
			 * 调用此方法以获取表单提交响应的默认行为。
			 * @param options 如果不希望在成功提交后重置 `<form>` 的值，请设置 `reset: false`。
			 * @param invalidateAll 如果不希望在提交后调用 `invalidateAll`，请设置 `invalidateAll: false`。
			 */
			update(options?: {
				reset?: boolean;
				invalidateAll?: boolean;
			}): Promise<void>;
	  }) => void)
>;

Transport

自 2.11.0 起可用

transport 钩子允许您在服务器/客户端边界上传输自定义类型。

每个传输器都有一对 encode 和 decode 函数。在服务器端，encode 决定一个值是否是自定义类型的实例，如果是，则返回该值的非假编码（可以是对象或数组，否则返回 false）。 在浏览器端，decode 将编码转换回自定义类型的实例。

import type { 
type Transport = {
    [x: string]: Transporter<any, any>;
}
The transport hook allows you to transport custom types across the server/client boundary.


Each transporter has a pair of encode and decode functions. On the server, encode determines whether a value is an instance of the custom type and, if so, returns a non-falsy encoding of the value which can be an object or an array (or false otherwise).


In the browser, decode turns the encoding back into an instance of the custom type.


import type { Transport } from '@sveltejs/kit';

declare class MyCustomType {
	data: any
}

// hooks.js
export const transport: Transport = {
	MyCustomType: {
		encode: (value) => value instanceof MyCustomType &#x26;&#x26; [value.data],
		decode: ([data]) => new MyCustomType(data)
	}
};
@since2.11.0
Transport } from '@sveltejs/kit';

declare class class MyCustomTypeMyCustomType {
	MyCustomType.data: anydata: any;
}

// hooks.js
export const const transport: Transporttransport: 
type Transport = {
    [x: string]: Transporter<any, any>;
}
The transport hook allows you to transport custom types across the server/client boundary.


Each transporter has a pair of encode and decode functions. On the server, encode determines whether a value is an instance of the custom type and, if so, returns a non-falsy encoding of the value which can be an object or an array (or false otherwise).


In the browser, decode turns the encoding back into an instance of the custom type.


import type { Transport } from '@sveltejs/kit';

declare class MyCustomType {
	data: any
}

// hooks.js
export const transport: Transport = {
	MyCustomType: {
		encode: (value) => value instanceof MyCustomType &#x26;&#x26; [value.data],
		decode: ([data]) => new MyCustomType(data)
	}
};
@since2.11.0
Transport = {
	
type MyCustomType: {
    encode: (value: any) => false | any[];
    decode: ([data]: any) => MyCustomType;
}
MyCustomType: {
		Transporter<any, any>.encode: (value: any) => anyencode: (value: anyvalue) => value: anyvalue instanceof class MyCustomTypeMyCustomType && [value: MyCustomTypevalue.MyCustomType.data: anydata],
		Transporter<any, any>.decode: (data: any) => anydecode: ([data: anydata]) => new constructor MyCustomType(): MyCustomTypeMyCustomType(data: anydata)
	}
};
type Transport = Record<string, Transporter>;

Transporter

transport 钩子的成员。

interface Transporter<
	T = any,
	U = Exclude<
		any,
		false | 0 | '' | null | undefined | typeof NaN
	>
> {…}
encode: (value: T) => false | U;
decode: (data: U) => T;

Private types

以下类型由上面文档的公共类型引用，但不能直接导入：

AdapterEntry

interface AdapterEntry {…}
id: string;

一个唯一标识 HTTP 服务（例如无服务器函数）的字符串，用于去重。 例如，/foo/a-[b] 和 /foo/[c] 是不同的路由，但在 Netlify _redirects 文件中都会表示为 /foo/:param，因此它们共享一个 ID

filter(route: RouteDefinition): boolean;

一个函数，用于比较候选路由与当前路由，以确定是否应与当前路由分组。

用例：

  • 回退页面：/foo/[c] 是 /foo/a-[b] 的回退，/[...catchall] 是所有路由的回退
  • 分组共享通用 config 的路由：/foo 应部署到边缘，/bar 和 /baz 应部署到无服务器函数
complete(entry: { generateManifest(opts: { relativePath: string }): string }): MaybePromise<void>;

一个在创建入口点后调用的函数。这是您应该将函数写入文件系统并生成重定向清单的地方。

Csp

namespace Csp {
	type ActionSource = 'strict-dynamic' | 'report-sample';
	type BaseSource =
		| 'self'
		| 'unsafe-eval'
		| 'unsafe-hashes'
		| 'unsafe-inline'
		| 'wasm-unsafe-eval'
		| 'none';
	type CryptoSource =
		`${'nonce' | 'sha256' | 'sha384' | 'sha512'}-${string}`;
	type FrameSource =
		| HostSource
		| SchemeSource
		| 'self'
		| 'none';
	type HostNameScheme = `${string}.${string}` | 'localhost';
	type HostSource =
		`${HostProtocolSchemes}${HostNameScheme}${PortScheme}`;
	type HostProtocolSchemes = `${string}://` | '';
	type HttpDelineator = '/' | '?' | '#' | '\\';
	type PortScheme = `:${number}` | '' | ':*';
	type SchemeSource =
		| 'http:'
		| 'https:'
		| 'data:'
		| 'mediastream:'
		| 'blob:'
		| 'filesystem:';
	type Source =
		| HostSource
		| SchemeSource
		| CryptoSource
		| BaseSource;
	type Sources = Source[];
}

CspDirectives

interface CspDirectives {…}
'child-src'?: Csp.Sources;
'default-src'?: Array<Csp.Source | Csp.ActionSource>;
'frame-src'?: Csp.Sources;
'worker-src'?: Csp.Sources;
'connect-src'?: Csp.Sources;
'font-src'?: Csp.Sources;
'img-src'?: Csp.Sources;
'manifest-src'?: Csp.Sources;
'media-src'?: Csp.Sources;
'object-src'?: Csp.Sources;
'prefetch-src'?: Csp.Sources;
'script-src'?: Array<Csp.Source | Csp.ActionSource>;
'script-src-elem'?: Csp.Sources;
'script-src-attr'?: Csp.Sources;
'style-src'?: Array<Csp.Source | Csp.ActionSource>;
'style-src-elem'?: Csp.Sources;
'style-src-attr'?: Csp.Sources;
'base-uri'?: Array<Csp.Source | Csp.ActionSource>;
sandbox?: Array<
| 'allow-downloads-without-user-activation'
| 'allow-forms'
| 'allow-modals'
| 'allow-orientation-lock'
| 'allow-pointer-lock'
| 'allow-popups'
| 'allow-popups-to-escape-sandbox'
| 'allow-presentation'
| 'allow-same-origin'
| 'allow-scripts'
| 'allow-storage-access-by-user-activation'
| 'allow-top-navigation'
| 'allow-top-navigation-by-user-activation'
>;
'form-action'?: Array<Csp.Source | Csp.ActionSource>;
'frame-ancestors'?: Array<Csp.HostSource | Csp.SchemeSource | Csp.FrameSource>;
'navigate-to'?: Array<Csp.Source | Csp.ActionSource>;
'report-uri'?: string[];
'report-to'?: string[];
'require-trusted-types-for'?: Array<'script'>;
  • 已弃用
'trusted-types'?: Array<'none' | 'allow-duplicates' | '*' | string>;
  • 已弃用
'upgrade-insecure-requests'?: boolean;
  • 已弃用
'require-sri-for'?: Array<'script' | 'style' | 'script style'>;
  • 已弃用

HttpMethod

type HttpMethod =
	| 'GET'
	| 'HEAD'
	| 'POST'
	| 'PUT'
	| 'DELETE'
	| 'PATCH'
	| 'OPTIONS';

Logger

interface Logger {…}
(msg: string): void;
success(msg: string): void;
error(msg: string): void;
warn(msg: string): void;
minor(msg: string): void;
info(msg: string): void;

MaybePromise

type MaybePromise<T> = T | Promise<T>;

PrerenderEntryGeneratorMismatchHandler

interface PrerenderEntryGeneratorMismatchHandler {…}
(details: { generatedFromId: string; entry: string; matchedId: string; message: string }): void;

PrerenderEntryGeneratorMismatchHandlerValue

type PrerenderEntryGeneratorMismatchHandlerValue =
	| 'fail'
	| 'warn'
	| 'ignore'
	| PrerenderEntryGeneratorMismatchHandler;

PrerenderHttpErrorHandler

interface PrerenderHttpErrorHandler {…}
(details: {
status: number;
path: string;
referrer: string | null;
referenceType: 'linked' | 'fetched';
message: string;
}): void;

PrerenderHttpErrorHandlerValue

type PrerenderHttpErrorHandlerValue =
	| 'fail'
	| 'warn'
	| 'ignore'
	| PrerenderHttpErrorHandler;

PrerenderMap

type PrerenderMap = Map<string, PrerenderOption>;

PrerenderMissingIdHandler

interface PrerenderMissingIdHandler {…}
(details: { path: string; id: string; referrers: string[]; message: string }): void;

PrerenderMissingIdHandlerValue

type PrerenderMissingIdHandlerValue =
	| 'fail'
	| 'warn'
	| 'ignore'
	| PrerenderMissingIdHandler;

PrerenderOption

type PrerenderOption = boolean | 'auto';

Prerendered

interface Prerendered {…}
pages: Map<
string,
{
	/** 甲骨文文件在输出目录中的位置 */
	file: string;
}
>;

一个 path 到 { file } 对象的映射，例如 /foo 对应 foo.html，而 /bar/ 对应 bar/index.html。

assets: Map<
string,
{
	type: string;
}
>;

一个 path 到 { type } 对象的映射。

redirects: Map<
string,
{
	status: number;
	location: string;
}
>;

预渲染期间遇到的重定向的映射。

paths: string[];

预渲染的路径数组（不带尾部斜杠，无论 trailingSlash 配置如何）

RequestOptions

interface RequestOptions {…}
getClientAddress(): string;
platform?: App.Platform;

RouteSegment

interface RouteSegment {…}
content: string;
dynamic: boolean;
rest: boolean;

TrailingSlash

type TrailingSlash = 'never' | 'always' | 'ignore';

在 GitHub 编辑此页面

上一页 下一页
术语表