跳至主要内容
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<undefined>
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';

服务器

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

版本

const VERSION: string;

错误

抛出一个带有 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;

失败

创建一个 ActionFailure 对象。

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

isActionFailure

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

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;

重定向

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

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

文本

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

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

操作

表单操作方法的形状，是 +page.server.js 中 export const actions = {..} 的一部分。有关更多信息，请参阅 表单操作。

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>;

操作失败

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

操作结果

通过 fetch 调用表单操作时，响应将采用以下其中一种形状。

<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 };

操作

+page.server.js 中 export const actions = {..} 对象的形状。有关更多信息，请参阅 表单操作。

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>>;

适配器

适配器 负责获取生产构建并将其转换为可以部署到您选择的平台上的内容。

interface Adapter {…}
name: string;

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

adapt(builder: Builder): MaybePromise<void>;
  • builder SvelteKit 提供的对象，其中包含用于适配应用程序的方法

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

supports?: {…}

在开发和构建期间调用的检查，以确定特定功能在此适配器中是否可以在生产环境中使用

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

测试 $app/server 中 read 的支持

emulate?(): MaybePromise<Emulator>;

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

导航后

传递给 afterNavigate 回调的参数。

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

导航类型

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

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

等待的操作

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

导航前

传递给 beforeNavigate 回调的参数。

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

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

构建器

此对象传递给适配器的 adapt 函数。它包含各种方法和属性，这些方法和属性对于适配应用程序很有用。

interface Builder {…}
log: Logger;

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

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>;

为静态 Web 服务器生成一个回退页面，当没有匹配的路由时使用。对于单页应用程序很有用。

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 文件。

配置

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

Cookie

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

获取以前使用 cookies.set 或从请求标头设置的 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头，但也会在当前请求期间通过cookies.get或cookies.getAll使cookie可用。

httpOnly和secure选项默认为true（除了在https://127.0.0.1上，secure为false），并且如果希望客户端JavaScript能够读取cookie和/或通过HTTP传输cookie，则必须显式禁用它们。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。

必须为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（除了在https://127.0.0.1上，secure为false），并且如果希望客户端JavaScript能够读取cookie和/或通过HTTP传输cookie，则必须显式禁用它们。sameSite选项默认为lax。

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

模拟器

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

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

一个函数，它使用当前路由的config和prerender选项被调用，并返回一个App.Platform对象。

处理

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

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

处理客户端错误

客户端handleError钩子在导航期间抛出意外错误时运行。

如果在加载或后续渲染期间抛出意外错误，则将使用该错误和事件调用此函数。确保此函数绝不抛出错误。

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

处理获取

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

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

处理服务器错误

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

如果在加载或渲染期间抛出意外错误，则将使用该错误和事件调用此函数。确保此函数绝不抛出错误。

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

Http错误

error函数返回的对象。

interface HttpError {…}
status: number;

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

body: App.Error;

错误的内容。

Kit配置

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

小于

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

加载

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>;

加载事件

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调用的开销。
  • 在服务器端渲染期间，响应将被捕获并内联到渲染的HTML中，方法是挂接到Response对象的text和json方法上。请注意，除非通过filterSerializedResponseHeaders显式包含，否则头不会被序列化。
  • 在水合期间，响应将从HTML中读取，保证一致性并防止额外的网络请求。

您可以在这里了解有关使用cookie发出带凭据的请求的更多信息此处

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函数中）是一个错误——您只能设置一次给定的头。

您不能使用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>
<button on:click={increase}>Increase Count</button>
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 }) {

	// Untrack url.pathname so that path changes don't trigger a rerun
	if (untrack: anyuntrack(() => url: anyurl.pathname === '/')) {
		return { message: stringmessage: 'Welcome!' };
	}
}

加载属性

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>;

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

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：应用程序已完成 hydration
  • form：用户提交了一个带有GET方法的<form>。
  • leave：用户通过关闭选项卡或使用后退/前进按钮导航到其他文档来离开应用程序。
  • link：导航是由链接点击触发的
  • goto：导航是由 goto(...) 调用或重定向触发的
  • popstate：导航是由后退/前进导航触发的
type NavigationType =
	| 'enter'
	| 'form'
	| 'leave'
	| 'link'
	| 'goto'
	| 'popstate';

数字范围

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

导航时

传递给onNavigate回调的参数。

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

导航类型

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

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

页面

$page存储的形状。

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;

仅在表单提交后填充。有关更多信息，请参阅表单操作。

参数匹配器

参数匹配器的形状。有关更多信息，请参阅匹配。

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

预渲染选项

type PrerenderOption = boolean | 'auto';

重定向

redirect函数返回的对象。

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

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

location: string;

要重定向到的位置。

请求事件

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调用的开销。
  • 在服务器端渲染期间，响应将被捕获并内联到渲染的HTML中，方法是挂接到Response对象的text和json方法上。请注意，除非通过filterSerializedResponseHeaders显式包含，否则头不会被序列化。
  • 在水合期间，响应将从HTML中读取，保证一致性并防止额外的网络请求。

您可以在这里了解有关使用cookie发出带凭据的请求的更多信息此处

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函数中）是一个错误——您只能设置一次给定的头。

您不能使用 setHeaders 添加 set-cookie 头 - 请改用 cookies API。

url: URL;

请求的 URL。

isDataRequest: boolean;

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

isSubRequest: boolean;

对于来自 SvelteKit 的 +server.js 调用，如果实际上没有进行 HTTP 请求，则为 true。当您在服务器上进行相同来源的 fetch 请求时，就会发生这种情况。

RequestHandler

一个 (event: RequestEvent) => Response 函数，导出自与 HTTP 动词（GET、PUT、PATCH 等）相对应的 +server.js 文件，并处理使用该方法的请求。

它接收 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

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

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

ResolveOptions

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

对 HTML 应用自定义转换。如果 done 为真，则它是最后一个片段。片段不保证是格式良好的 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 映射

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>
<button on:click={increase}>Increase Count</button>
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 }) {

	// Untrack url.pathname so that path changes don't trigger a rerun
	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>;
			/**
			 * Call this to get the default behavior of a form submission response.
			 * @param options Set `reset: false` if you don't want the `<form>` values to be reset after a successful submission.
			 * @param invalidateAll Set `invalidateAll: false` if you don't want the action to call `invalidateAll` after submission.
			 */
			update(options?: {
				reset?: boolean;
				invalidateAll?: boolean;
			}): Promise<void>;
	  }) => void)
>;

私有类型

以下内容由上面记录的公共类型引用，但不能直接导入

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'>;
  • 已弃用
'block-all-mixed-content'?: boolean;
  • 已弃用
'plugin-types'?: Array<`${string}/${string}` | 'none'>;
  • 已弃用
referrer?: Array<
| 'no-referrer'
| 'no-referrer-when-downgrade'
| 'origin'
| 'origin-when-cross-origin'
| 'same-origin'
| 'strict-origin'
| 'strict-origin-when-cross-origin'
| 'unsafe-url'
| 'none'
>;
  • 已弃用

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;

预渲染选项

type PrerenderOption = boolean | 'auto';

Prerendered

interface Prerendered {…}
pages: Map<
string,
{
	/** The location of the .html file relative to the output directory */
	file: string;
}
>;

一个 path 到 { file } 对象的映射，其中路径如 /foo 对应于 foo.html，路径如 /bar/ 对应于 bar/index.html。

assets: Map<
string,
{
	/** The MIME type of the asset */
	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 上编辑此页面

上一页 下一页

词汇表