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()}1
2
3
<h1>home</h1>
<p>this is the home page.</p>