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
来获取这些信息,它提供了一个具有相同信息的$page
store。如果你目前正在使用$app/stores
,我们建议你迁移到$app/state
(需要 Svelte 5)。
1
2
3
<h1>home</h1>
<p>this is the home page.</p>