Skip to main content
Svelte 基础
介绍
响应式
属性
逻辑
事件
绑定
类和样式
Actions
过渡动画
Svelte 进阶
高级响应性
复用内容
Motion
高级绑定
高级过渡效果
Context API
特殊元素
<script module>
后续步骤
SvelteKit 基础
介绍
路由
加载数据
请求头和 Cookie
共享模块
表单
API 路由
$app/state
错误和重定向
SvelteKit 进阶
钩子函数
页面选项
链接选项
高级路由
高级加载
环境变量
结论

SvelteKit 通过 $app/state 模块提供了三个只读状态对象 — pagenavigatingupdated。其中你最常用的是 page,它提供了当前页面的相关信息:

  • url — 当前页面的 URL
  • params — 当前页面的参数
  • 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)。

在 GitHub 编辑此页面

上一页 下一页
1
2
3
<h1>home</h1>
<p>this is the home page.</p>