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 ストアをインポートし、ナビゲーションバーにメッセージを追加します。

<script>
	import { page, navigating } from '$app/stores';

	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}
		navigating to {$navigating.to.url.pathname}
	{/if}
</nav>

{@render children()}