$app/state / 导航状态 • Svelte 教程 • 中文文档

SvelteKit 基础 $app/state 导航状态

navigating 对象表示当前的导航状态。当导航开始时 — 可能是因为点击链接、前进/后退导航、或程序化的 goto 调用 — navigating 的值会变成一个包含以下属性的对象：

from 和 to — 包含 params、route 和 url 属性的对象
type — 导航类型，例如 link、popstate 或 goto

完整的类型信息请访问 Navigation 文档。

它可以用来显示长时间导航的加载指示器。在本练习中，src/routes/+page.server.js 和 src/routes/about/+page.server.js 都添加了一个人为延迟。在 src/routes/+layout.svelte 中，导入 navigating 对象并在导航栏中添加一条消息：

src/routes/+layout

<script>
	import { page, navigating } 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>

	{#if navigating.to}
		navigating to {navigating.to.url.pathname}
	{/if}
</nav>

{@render children()}

<script lang="ts">
	import { page, navigating } 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>

	{#if navigating.to}
		navigating to {navigating.to.url.pathname}
	{/if}
</nav>

{@render children()}

在 SvelteKit 2.12 之前，你必须使用 $app/stores 来实现这个功能，它提供了一个具有相同信息的 $navigating store。如果你目前正在使用 $app/stores，我们建议你迁移到 $app/state（需要 Svelte 5）。

在 GitHub 编辑此页面

page updated

<h1>home</h1>

<p>this is the home page.</p>

show text show editor