navigating 对象代表当前导航。当导航开始时（由于链接点击、后退/前进导航或程序化 goto），navigating 的值将成为具有以下属性的对象：

¥The navigating object represents the current navigation. When a navigation starts — because of a link click, or a back/forward navigation, or a programmatic goto — the value of navigating will become an object with the following properties:

• from 和 to — 具有 params、route 和 url 属性的对象

  ¥from and to — objects with params, route and url properties

• type — 导航类型，例如 link、popstate 或 goto

  ¥type — the type of navigation, e.g. link, popstate or goto

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

它可用于显示长时间运行导航的加载指示器。在此练习中，src/routes/+page.server.js 和 src/routes/about/+page.server.js 都有人为的延迟。在 src/routes/+layout.svelte 内部，导入 navigating 对象并向导航栏添加一条消息：

¥It can be used to show a loading indicator for long-running navigations. In this exercise, src/routes/+page.server.js and src/routes/about/+page.server.js both have an artificial delay. Inside src/routes/+layout.svelte, import the navigating object and add a message to the nav bar:

<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 存储提供相同的信息。如果你目前正在使用 $app/stores，我们建议你迁移到 $app/state（需要 Svelte 5）。