跳至主要内容

navigating 存储表示当前导航。当导航开始时——由于链接点击、后退/前进导航或编程 goto——navigating 的值将变为具有以下属性的对象

  • fromto——具有 paramsrouteurl 属性的对象
  • type——导航类型,例如 linkpopstategoto

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

它可用于显示长时间运行导航的加载指示器。在本练习中,src/routes/+page.server.jssrc/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>