SvelteKit参考

$app/state

SvelteKit 通过 $app/state 模块提供三个只读状态对象 - page、navigating 和 updated。

¥SvelteKit makes three read-only state objects available via the $app/state module — page, navigating and updated.

此模块已在 2.12 中添加。如果你使用的是 SvelteKit 的早期版本，请改用 $app/stores。

¥[!NOTE] This module was added in 2.12. If you’re using an earlier version of SvelteKit, use $app/stores instead.

import { const navigating: Navigation | {
    from: null;
    to: null;
    type: null;
    willUnload: null;
    delta: null;
    complete: null;
}A read-only object representing an in-progress navigation, with from, to, type and (if type === 'popstate') delta properties.
Values are null when no navigation is occurring, or during server rendering.
navigating, const page: Page<Record<string, string>, string | null>A read-only reactive object with information about the current page, serving several use cases:

retrieving the combined data of all pages/layouts anywhere in your component tree (also see loading data)
retrieving the current value of the form prop anywhere in your component tree (also see form actions)
retrieving the page state that was set through goto, pushState or replaceState (also see goto and shallow routing)
retrieving metadata such as the URL you’re on, the current route and its parameters, and whether or not there was an error

&#x3C;! file: +layout.svelte >
&#x3C;script>
	import { page } from '$app/state';
&#x3C;/script>

&#x3C;p>Currently at {page.url.pathname}&#x3C;/p>

{#if page.error}
	&#x3C;span class="red">Problem detected&#x3C;/span>
{:else}
	&#x3C;span class="small">All systems operational&#x3C;/span>
{/if}
Changes to page are available exclusively with runes. (The legacy reactivity syntax will not reflect any changes)
&#x3C;! file: +page.svelte >
&#x3C;script>
	import { page } from '$app/state';
	const id = $derived(page.params.id); // This will correctly update id for usage on this page
	$: badId = page.params.id; // Do not use; will never update after initial load
&#x3C;/script>
On the server, values can only be read during rendering (in other words not in e.g. load functions). In the browser, the values can be read at any time.
page, const updated: {
    readonly current: boolean;
    check(): Promise<boolean>;
}A read-only reactive value that’s initially false. If version.pollInterval is a non-zero value, SvelteKit will poll for new versions of the app and update current to true when it detects one. updated.check() will force an immediate check, regardless of polling.
updated } from '$app/state';

navigating

表示正在进行的导航的只读对象，具有 from、to、type 和（如果是 type === 'popstate'）delta 属性。当没有导航发生时或在服务器渲染期间，值为 null。

¥A read-only object representing an in-progress navigation, with from, to, type and (if type === 'popstate') delta properties. Values are null when no navigation is occurring, or during server rendering.

const navigating:
	| import('@sveltejs/kit').Navigation
	| {
			from: null;
			to: null;
			type: null;
			willUnload: null;
			delta: null;
			complete: null;
	  };

page

包含当前页面信息的只读反应对象，可用于多种用例：

¥A read-only reactive object with information about the current page, serving several use cases:

检索组件树中任何位置的所有页面/布局的组合 data（另请参阅加载数据）

¥retrieving the combined data of all pages/layouts anywhere in your component tree (also see loading data)
检索组件树中任何位置的 form prop 的当前值（另请参阅表单操作)

¥retrieving the current value of the form prop anywhere in your component tree (also see form actions)
检索通过 goto、pushState 或 replaceState 设置的页面状态（另请参阅 goto 和浅路由）

¥retrieving the page state that was set through goto, pushState or replaceState (also see goto and shallow routing)
检索元数据，例如你所在的 URL、当前路由及其参数，以及是否存在错误

¥retrieving metadata such as the URL you’re on, the current route and its parameters, and whether or not there was an error

+layout

<script>
	import { page } from '$app/state';
</script>

<p>Currently at {page.url.pathname}</p>

{#if page.error}
	<span class="red">Problem detected</span>
{:else}
	<span class="small">All systems operational</span>
{/if}

<script lang="ts">
	import { page } from '$app/state';
</script>

<p>Currently at {page.url.pathname}</p>

{#if page.error}
	<span class="red">Problem detected</span>
{:else}
	<span class="small">All systems operational</span>
{/if}

page 的更改仅通过 Runes 提供。（旧版反应性语法不会反映任何更改）

¥Changes to page are available exclusively with runes. (The legacy reactivity syntax will not reflect any changes)

+page

<script>
	import { page } from '$app/state';
	const id = $derived(page.params.id); // This will correctly update id for usage on this page
	$: badId = page.params.id; // Do not use; will never update after initial load
</script>

<script lang="ts">
	import { page } from '$app/state';
	const id = $derived(page.params.id); // This will correctly update id for usage on this page
	$: badId = page.params.id; // Do not use; will never update after initial load
</script>

在服务器上，只能在渲染期间读取值（换句话说，不能在 load 函数中读取）。在浏览器中，可以随时读取值。

¥On the server, values can only be read during rendering (in other words not in e.g. load functions). In the browser, the values can be read at any time.

const page: import('@sveltejs/kit').Page;

updated

最初为 false 的只读反应值。如果 version.pollInterval 是非零值，SvelteKit 将轮询应用的新版本，并在检测到新版本时将 current 更新为 true。updated.check() 将强制立即检查，无论轮询如何。

¥A read-only reactive value that’s initially false. If version.pollInterval is a non-zero value, SvelteKit will poll for new versions of the app and update current to true when it detects one. updated.check() will force an immediate check, regardless of polling.

const updated: {
	get current(): boolean;
	check(): Promise<boolean>;
};

$app/server $app/stores