跳至主要內容
基本 SvelteKit 儲存 導覽

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/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()}

在 GitHub 上編輯此頁面

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