参考

模块

SvelteKit 为您的应用程序提供了许多模块。

$app/environment永久链接

ts
import { browser, building, dev, version } from '$app/environment';

browser永久链接

如果应用程序在浏览器中运行，则为true。

ts
const browser: boolean;

building永久链接

SvelteKit 通过运行在build步骤期间分析您的应用程序。在此过程中，building为true。这在预渲染期间也适用。

ts
const building: boolean;

dev永久链接

开发服务器是否正在运行。这不能保证与NODE_ENV或MODE相对应。

ts
const dev: boolean;

version永久链接

config.kit.version.name的值。

ts
const version: string;

$app/forms永久链接

ts
import { applyAction, deserialize, enhance } from '$app/forms';

applyAction永久链接

此操作使用给定数据更新当前页面的form属性，并更新$page.status。如果发生错误，它会重定向到最近的错误页面。

ts
function applyAction<
	Success extends Record<string, unknown> | undefined,
	Failure extends Record<string, unknown> | undefined
>(
	result: import('@sveltejs/kit').ActionResult<
		Success,
		Failure
	>
): Promise<void>;

deserialize永久链接

使用此函数反序列化表单提交的响应。用法

ts
import { deserialize } from '$app/forms';

async function handleSubmit(event) {
  const response = await fetch('/form?/action', {
	method: 'POST',
	body: new FormData(event.target)
  });

  const result = deserialize(await response.text());
  // ...
}

ts
function deserialize<
	Success extends Record<string, unknown> | undefined,
	Failure extends Record<string, unknown> | undefined
>(
	result: string
): import('@sveltejs/kit').ActionResult<Success, Failure>;

enhance永久链接

此操作增强了 <form> 元素，否则该元素将在没有 JavaScript 的情况下工作。

submit 函数在提交时使用给定的 FormData 和应该触发的 action 调用。如果调用 cancel，则不会提交表单。你可以使用中止 controller 在另一个启动的情况下取消提交。如果返回一个函数，则使用服务器的响应调用该函数。如果没有返回任何内容，则将使用后备。

如果未设置此函数或其返回值，则它

如果操作与表单位于同一页面，则回退到使用返回的数据更新 form 属性
更新 $page.status
在没有重定向响应的情况下成功提交时重置 <form> 元素并使所有数据无效
在重定向响应的情况下重定向
在意外错误的情况下重定向到最近的错误页面

如果你使用回调提供自定义函数并希望使用默认行为，请在回调中调用 update。

ts
function enhance<
	Success extends Record<string, unknown> | undefined,
	Failure extends Record<string, unknown> | undefined
>(
	form_element: HTMLFormElement,
	submit?: import('@sveltejs/kit').SubmitFunction<
		Success,
		Failure
	>
): {
	destroy(): void;
};

ts
import {
	afterNavigate,
	beforeNavigate,
	disableScrollHandling,
	goto,
	invalidate,
	invalidateAll,
	onNavigate,
	preloadCode,
	preloadData,
	pushState,
	replaceState
} from '$app/navigation';

当当前组件装载时运行所提供的 callback 的生命周期函数，并且每当我们导航到新 URL 时也会运行。

afterNavigate 必须在组件初始化期间调用。只要组件已装载，它就会保持活动状态。

ts
function afterNavigate(
	callback: (
		navigation: import('@sveltejs/kit').AfterNavigate
	) => void
): void;

导航拦截器，在我们导航到新 URL 之前触发，无论通过单击链接、调用 goto(...)，还是使用浏览器后退/前进控件。

调用 cancel() 将阻止导航完成。如果 navigation.type === 'leave' — 表示用户正在离开应用程序（或关闭标签页）— 调用 cancel 将触发本机浏览器卸载确认对话框。在这种情况下，导航可能会或可能不会被取消，具体取决于用户的响应。

当导航不是到 SvelteKit 拥有的路由（因此由 SvelteKit 的客户端路由器控制）时，navigation.to.route.id 将为 null。

如果导航（如果没有取消）会导致文档卸载——换句话说，'leave' 导航和 'link' 导航，其中 navigation.to.route === null——navigation.willUnload 为 true。

beforeNavigate 必须在组件初始化期间调用。只要组件已装载，它就会保持活动状态。

ts
function beforeNavigate(
	callback: (
		navigation: import('@sveltejs/kit').BeforeNavigate
	) => void
): void;

如果在导航后更新页面时调用（例如在 onMount 或 afterNavigate 或操作中），这将禁用 SvelteKit 的内置滚动处理。通常不建议这样做，因为它会破坏用户的预期。

ts
function disableScrollHandling(): void;

返回一个 Promise，当 SvelteKit 导航到指定的 url（或导航失败，在这种情况下，promise 会被拒绝）时，该 Promise 会解析。对于外部 URL，请使用 window.location = url 而不是调用 goto(url)。

ts
function goto(
	url: string | URL,
	opts?:
		| {
				replaceState?: boolean | undefined;
				noScroll?: boolean | undefined;
				keepFocus?: boolean | undefined;
				invalidateAll?: boolean | undefined;
				state?: App.PageState | undefined;
		  }
		| undefined
): Promise<void>;

通过 fetch 或 depends，导致属于当前活动页面的任何 load 函数重新运行（如果它们依赖于有问题的 url）。返回一个 Promise，当页面随后更新时，该 Promise 会解析。

如果参数作为 string 或 URL 给出，它必须解析为传递给 fetch 或 depends 的相同 URL（包括查询参数）。要创建自定义标识符，请使用以 [a-z]+: 开头的字符串（例如 custom:state）——这是一个有效的 URL。

function 参数可用于定义自定义谓词。它接收完整的 URL，如果返回 true，则导致 load 重新运行。如果你想根据模式而不是精确匹配来使之无效，这可能很有用。

ts
// Example: Match '/path' regardless of the query parameters
import { invalidate } from '$app/navigation';

invalidate((url) => url.pathname === '/path');

ts
function invalidate(
	resource: string | URL | ((url: URL) => boolean)
): Promise<void>;

导致属于当前活动页面的所有 load 函数重新运行。返回一个 Promise，当页面随后更新时，该 Promise 会解析。

ts
function invalidateAll(): Promise<void>;

一个生命周期函数，在导航到新 URL 之前立即运行提供的 callback，全页导航除外。

如果您返回一个 Promise，SvelteKit 将在完成导航之前等待它解析。这允许您（例如）使用 document.startViewTransition。避免解析缓慢的 promise，因为导航在用户看来会停滞。

如果从回调返回一个函数（或解析为函数的 Promise），则在 DOM 更新后将调用该函数。

onNavigate 必须在组件初始化期间调用。只要组件已挂载，它就会保持活动状态。

ts
function onNavigate(
	callback: (
		navigation: import('@sveltejs/kit').OnNavigate
	) => MaybePromise<(() => void) | void>
): void;

以编程方式导入尚未获取的路由的代码。通常，您可能调用此代码以加快后续导航。

您可以通过任何匹配的路径名指定路由，例如 /about（匹配 src/routes/about/+page.svelte）或 /blog/*（匹配 src/routes/blog/[slug]/+page.svelte）。

与 preloadData 不同，这不会调用 load 函数。返回一个 Promise，该 Promise 在导入模块后解析。

ts
function preloadCode(pathname: string): Promise<void>;

以编程方式预加载给定的页面，这意味着

确保加载页面的代码，以及
使用适当的选项调用页面的 load 函数。

这是 SvelteKit 在用户点击或将鼠标悬停在具有 data-sveltekit-preload-data 的 <a> 元素上时触发的相同行为。如果下一次导航到 href，将使用从 load 返回的值，从而使导航瞬时完成。返回一个 Promise，该 Promise 在预加载完成后解析，其中包含运行新路由的 load 函数的结果。

ts
function preloadData(href: string): Promise<
	| {
			type: 'loaded';
			status: number;
			data: Record<string, any>;
	  }
	| {
			type: 'redirect';
			location: string;
	  }
>;

以编程方式使用给定的 $page.state 创建一个新的历史记录条目。要使用当前 URL，您可以将 '' 作为第一个参数传递。用于浅层路由。

ts
function pushState(
	url: string | URL,
	state: App.PageState
): void;

以编程方式使用给定的 $page.state 替换当前历史记录条目。要使用当前 URL，您可以将 '' 作为第一个参数传递。用于浅层路由。

ts
function replaceState(
	url: string | URL,
	state: App.PageState
): void;

$app/pathspermalink

ts
import { assets, base, resolveRoute } from '$app/paths';

assetspermalink

与 config.kit.paths.assets 匹配的绝对路径。

如果指定了 config.kit.paths.assets 的值，它将在 vite dev 或 vite preview 期间被替换为 '/_svelte_kit_assets'，因为资产尚未存在于其最终 URL 中。

ts
let assets:
	| ''
	| `https://${string}`
	| `http://${string}`
	| '/_svelte_kit_assets';

base永久链接

与 config.kit.paths.base 匹配的字符串。

示例用法：<a href="{base}/your-page">Link</a>

ts
let base: '' | `/${string}`;

resolveRoute永久链接

使用参数填充路由 ID 以解析路径名。

ts
function resolveRoute(
	id: string,
	params: Record<string, string | undefined>
): string;

$app/server永久链接

ts
import { read } from '$app/server';

read永久链接

从文件系统读取导入资产的内容

ts
function read(asset: string): Response;

$app/stores永久链接

ts
import { getStores, navigating, page, updated } from '$app/stores';

getStores永久链接

ts
function getStores(): {
	page: typeof page;

	navigating: typeof navigating;

	updated: typeof updated;
};

navigating永久链接

可读存储。当导航开始时，其值为具有 from、to、type 和（如果 type === 'popstate'）delta 属性的 Navigation 对象。当导航结束时，其值恢复为 null。

在服务器上，此存储只能在组件初始化期间订阅。在浏览器中，它可以在任何时候订阅。

ts
const navigating: import('svelte/store').Readable<
	import('@sveltejs/kit').Navigation | null
>;

page永久链接

可读存储，其值包含页面数据。

在服务器上，此存储只能在组件初始化期间订阅。在浏览器中，它可以在任何时候订阅。

ts
const page: import('svelte/store').Readable<
	import('@sveltejs/kit').Page
>;

updated永久链接

可读存储，其初始值为 false。如果 version.pollInterval 是非零值，SvelteKit 将轮询新版本的应用程序，并在检测到新版本时将存储值更新为 true。updated.check() 将强制立即检查，而不考虑轮询。

在服务器上，此存储只能在组件初始化期间订阅。在浏览器中，它可以在任何时候订阅。

ts
const updated: import('svelte/store').Readable<boolean> & {
	check(): Promise<boolean>;
};

$env/dynamic/private永久链接

此模块提供对运行时环境变量的访问，由你运行的平台定义。例如，如果你使用 adapter-node（或运行 vite preview），这等同于 process.env。此模块仅包含不以 config.kit.env.publicPrefix 开头且以 config.kit.env.privatePrefix 开头（如果已配置）的变量。

此模块无法导入到客户端代码中。

预渲染期间无法使用动态环境变量。

ts
import { env } from '$env/dynamic/private';
console.log(env.DEPLOYMENT_SPECIFIC_VARIABLE);

在 dev 中，$env/dynamic 始终包含来自 .env 的环境变量。在 prod 中，此行为取决于你的适配器。

$env/dynamic/public永久链接

类似于 $env/dynamic/private，但只包含以 config.kit.env.publicPrefix 开头的变量（默认为 PUBLIC_），因此可以安全地公开给客户端代码。

请注意，所有公共动态环境变量都必须从服务器发送到客户端，这会导致更大的网络请求——如果可能，请改用 $env/static/public。

预渲染期间无法使用动态环境变量。

ts
import { env } from '$env/dynamic/public';
console.log(env.PUBLIC_DEPLOYMENT_SPECIFIC_VARIABLE);

$env/static/private永久链接

由 Vite 从 .env 文件和 process.env 加载的环境变量。与 $env/dynamic/private 类似，此模块无法导入到客户端代码中。此模块仅包含不以 config.kit.env.publicPrefix 开头但以 config.kit.env.privatePrefix 开头的变量（如果已配置）。

与 $env/dynamic/private 不同，从此模块导出的值在构建时会静态注入到你的包中，从而实现死代码消除等优化。

ts
import { API_KEY } from '$env/static/private';

请注意，代码中引用的所有环境变量都应声明（例如在 .env 文件中），即使它们在应用程序部署之前没有值。

MY_FEATURE_FLAG=""

你可以像这样从命令行覆盖 .env 值

MY_FEATURE_FLAG="enabled" npm run dev

$env/static/public永久链接

类似于 $env/static/private，但它只包含以 config.kit.env.publicPrefix 开头的环境变量（默认为 PUBLIC_），因此可以安全地公开给客户端代码。

值在构建时静态替换。

ts
import { PUBLIC_BASE_URL } from '$env/static/public';

$lib永久链接

这是对 src/lib 的简单别名，或指定为 config.kit.files.lib 的任何目录。它允许你访问通用组件和实用程序模块，而无需 ../../../../ 的麻烦。

$lib/server永久链接

$lib 的子目录。SvelteKit 将阻止你将 $lib/server 中的任何模块导入到客户端代码中。请参阅仅服务器模块。

$service-worker永久链接

ts
import { base, build, files, prerendered, version } from '$service-worker';

此模块仅适用于service workers。

base永久链接

部署的base路径。通常这等同于config.kit.paths.base，但它是从location.pathname计算的，这意味着如果网站部署到子目录，它将继续正常工作。请注意，有一个base，但没有assets，因为如果指定了config.kit.paths.assets，则无法使用 service workers。

ts
const base: string;

build永久链接

一个 URL 字符串数组，表示由 Vite 生成的文件，适用于使用 cache.addAll(build) 进行缓存。在开发期间，这是一个空数组。

ts
const build: string[];

files永久链接

一个 URL 字符串数组，表示静态目录中的文件，或由 config.kit.files.assets 指定的任何目录。你可以使用 config.kit.serviceWorker.files 自定义从 static 目录中包含哪些文件

ts
const files: string[];

prerendered永久链接

一个对应于预渲染页面和端点的路径名数组。在开发期间，这是一个空数组。

ts
const prerendered: string[];

version永久链接

参见 config.kit.version。它对于在 service worker 中生成唯一的缓存名称很有用，以便稍后部署你的应用可以使旧缓存失效。

ts
const version: string;

@sveltejs/kit永久链接

ts
import {
	VERSION,
	error,
	fail,
	isHttpError,
	isRedirect,
	json,
	redirect,
	text
} from '@sveltejs/kit';

VERSION永久链接

ts
const VERSION: string;

error永久链接

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

ts
function error(status: number, body: App.Error): never;

error永久链接

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

fail永久链接

创建一个 ActionFailure 对象。

ts
function fail(status: number): ActionFailure<undefined>;

fail永久链接

创建一个 ActionFailure 对象。

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

isHttpError永久链接

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

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

isRedirect永久链接

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

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

json永久链接

从提供的 data 创建一个 JSON `Response` 对象。

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

redirect永久链接

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

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

text永久链接

从提供的 body 创建一个 `Response` 对象。

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

@sveltejs/kit/hooks永久链接

ts
import { sequence } from '@sveltejs/kit/hooks';

sequence永久链接

一个用于以类似中间件的方式对多个 `handle` 调用进行排序的帮助函数。`handle` 选项的行为如下

transformPageChunk 以相反的顺序应用并合并
preload 以正向顺序应用，第一个选项“获胜”，并且在其之后的任何 `preload` 选项都不会被调用
filterSerializedResponseHeaders 的行为与 `preload` 相同

src/hooks.server.js

ts
import { sequence } from '@sveltejs/kit/hooks';

/// type: import('@sveltejs/kit').Handle
Binding element 'html' implicitly has an 'any' type.7031Binding element 'html' implicitly has an 'any' type.async function first({ event, resolve }) {
	console.log('first pre-processing');
	const result = await resolve(event, {
		transformPageChunk: ({ html }) => {
			// transforms are applied in reverse order
			console.log('first transform');
			return html;
		},
		preload: () => {
			// this one wins as it's the first defined in the chain
			console.log('first preload');
		}
	});
	console.log('first post-processing');
	return result;
Binding element 'event' implicitly has an 'any' type.
Binding element 'resolve' implicitly has an 'any' type.7031
7031Binding element 'event' implicitly has an 'any' type.
Binding element 'resolve' implicitly has an 'any' type.}

/// type: import('@sveltejs/kit').Handle
Binding element 'html' implicitly has an 'any' type.7031Binding element 'html' implicitly has an 'any' type.async function second({ event, resolve }) {
	console.log('second pre-processing');
	const result = await resolve(event, {
		transformPageChunk: ({ html }) => {
			console.log('second transform');
			return html;
		},
		preload: () => {
			console.log('second preload');
		},
		filterSerializedResponseHeaders: () => {
			// this one wins as it's the first defined in the chain
		   console.log('second filterSerializedResponseHeaders');
		}
	});
	console.log('second post-processing');
	return result;
}

export const handle = sequence(first, second);

src/hooks.server.ts

ts
import { sequence } from '@sveltejs/kit/hooks';

/// type: import('@sveltejs/kit').Handle
Binding element 'html' implicitly has an 'any' type.7031Binding element 'html' implicitly has an 'any' type.async function first({ event, resolve }) {
	console.log('first pre-processing');
	const result = await resolve(event, {
		transformPageChunk: ({ html }) => {
			// transforms are applied in reverse order
			console.log('first transform');
			return html;
		},
		preload: () => {
			// this one wins as it's the first defined in the chain
			console.log('first preload');
		},
	});
	console.log('first post-processing');
	return result;
Binding element 'event' implicitly has an 'any' type.
Binding element 'resolve' implicitly has an 'any' type.7031
7031Binding element 'event' implicitly has an 'any' type.
Binding element 'resolve' implicitly has an 'any' type.}

/// type: import('@sveltejs/kit').Handle
Binding element 'html' implicitly has an 'any' type.7031Binding element 'html' implicitly has an 'any' type.async function second({ event, resolve }) {
	console.log('second pre-processing');
	const result = await resolve(event, {
		transformPageChunk: ({ html }) => {
			console.log('second transform');
			return html;
		},
		preload: () => {
			console.log('second preload');
		},
		filterSerializedResponseHeaders: () => {
			// this one wins as it's the first defined in the chain
			console.log('second filterSerializedResponseHeaders');
		},
	});
	console.log('second post-processing');
	return result;
}

export const handle = sequence(first, second);

上面的示例将打印

first pre-processing
first preload
second pre-processing
second filterSerializedResponseHeaders
second transform
first transform
second post-processing
first post-processing

ts
function sequence(
	...handlers: import('@sveltejs/kit').Handle[]
): import('@sveltejs/kit').Handle;

@sveltejs/kit/node永久链接

ts
import {
	createReadableStream,
	getRequest,
	setResponse
} from '@sveltejs/kit/node';

createReadableStream永久链接

将磁盘上的文件转换为可读流

ts
function createReadableStream(file: string): ReadableStream;

getRequest永久链接

ts
function getRequest({
	request,
	base,
	bodySizeLimit
}: {
	request: import('http').IncomingMessage;
	base: string;
	bodySizeLimit?: number;
}): Promise<Request>;

setResponse永久链接

ts
function setResponse(
	res: import('http').ServerResponse,
	response: Response
): Promise<void>;

@sveltejs/kit/node/polyfills永久链接

ts
import { installPolyfills } from '@sveltejs/kit/node/polyfills';

installPolyfills永久链接

使各种 Web API 作为全局变量可用

crypto
File

ts
function installPolyfills(): void;

@sveltejs/kit/vite永久链接

ts
import { sveltekit } from '@sveltejs/kit/vite';

sveltekit永久链接

返回 SvelteKit Vite 插件。

ts
function sveltekit(): Promise<import('vite').Plugin[]>;

上一个命令行界面

下一个类型

模块

$app/environment永久链接

browser永久链接

building永久链接

dev永久链接

version永久链接

$app/forms永久链接

applyAction永久链接

deserialize永久链接

enhance永久链接

$app/navigation永久链接

afterNavigate永久链接

beforeNavigate永久链接

disableScrollHandling永久链接

goto永久链接

invalidate永久链接

invalidateAll永久链接

onNavigate永久链接

preloadCodepermalink

preloadDatapermalink

pushStatepermalink

replaceStatepermalink

$app/pathspermalink

assetspermalink

base永久链接

resolveRoute永久链接

$app/server永久链接

read永久链接

$app/stores永久链接

getStores永久链接

navigating永久链接

page永久链接

updated永久链接

$env/dynamic/private永久链接

$env/dynamic/public永久链接

$env/static/private永久链接

$env/static/public永久链接

$lib永久链接

$lib/server永久链接

$service-worker永久链接

base永久链接

build永久链接

files永久链接

prerendered永久链接

version永久链接

@sveltejs/kit永久链接

VERSION永久链接

error永久链接

error永久链接

fail永久链接

fail永久链接

isHttpError永久链接

isRedirect永久链接

json永久链接

redirect永久链接

text永久链接

@sveltejs/kit/hooks永久链接

sequence永久链接

@sveltejs/kit/node永久链接

createReadableStream永久链接

getRequest永久链接

setResponse永久链接

@sveltejs/kit/node/polyfills永久链接

installPolyfills永久链接

@sveltejs/kit/vite永久链接

sveltekit永久链接