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>