SvelteKit 通过 $app/state 模块提供了三个只读状态对象 — page、navigating 和 updated。其中你最常用的是 page,它提供了当前页面的相关信息:
url— 当前页面的 URLparams— 当前页面的参数route— 一个包含id属性的对象,表示当前路由status— 当前页面的 HTTP 状态码error— 当前页面的错误对象(如果有的话)(你将在后续练习中了解更多关于错误处理的内容)data— 当前页面的数据,组合了所有load函数的返回值form— 从表单 action返回的数据
这些属性都是响应式的,在底层使用了 $state.raw。以下是使用 page.url.pathname 的示例:
src/routes/+layout
<script>
import { page } from '$app/state';
let { children } = $props();
</script>
<nav>
<a href="/" aria-current={page.url.pathname === '/'}>
home
</a>
<a href="/about" aria-current={page.url.pathname === '/about'}>
about
</a>
</nav>
{@render children()}<script lang="ts">
import { page } from '$app/state';
let { children } = $props();
</script>
<nav>
<a href="/" aria-current={page.url.pathname === '/'}>
home
</a>
<a href="/about" aria-current={page.url.pathname === '/about'}>
about
</a>
</nav>
{@render children()}在 SvelteKit 2.12 之前,你必须使用
$app/stores来获取这些信息,它提供了一个具有相同信息的$pagestore。如果你目前正在使用$app/stores,我们建议你迁移到$app/state(需要 Svelte 5)。
1
2
3
<h1>home</h1>
<p>this is the home page.</p>