Skip to main content
基本 Svelte
介绍
反应性
属性
逻辑
事件
绑定
类和样式
动作
转换
高级 Svelte
高级反应性
重用内容
运动
高级绑定
高级转换
上下文 API
特殊元素
<script module>
后续步骤
基本 SvelteKit
介绍
路由
加载数据
标题和 cookie
共享模块
表单
API 路由
$app/state
错误和重定向
高级 SvelteKit
钩子
页面选项
链接选项
高级路由
高级加载
环境变量
结论

navigating 对象代表当前导航。当导航开始时(由于链接点击、后退/前进导航或程序化 goto),navigating 的值将成为具有以下属性的对象:

¥The navigating object represents the current navigation. When a navigation starts — because of a link click, or a back/forward navigation, or a programmatic goto — the value of navigating will become an object with the following properties:

  • fromto — 具有 paramsrouteurl 属性的对象

    ¥from and to — objects with params, route and url properties

  • type — 导航类型,例如 linkpopstategoto

    ¥type — the type of navigation, e.g. link, popstate or goto

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

¥[!NOTE] For complete type information visit the Navigation documentation.

它可用于显示长时间运行导航的加载指示器。在此练习中,src/routes/+page.server.jssrc/routes/about/+page.server.js 都有人为的延迟。在 src/routes/+layout.svelte 内部,导入 navigating 对象并向导航栏添加一条消息:

¥It can be used to show a loading indicator for long-running navigations. In this exercise, src/routes/+page.server.js and src/routes/about/+page.server.js both have an artificial delay. Inside src/routes/+layout.svelte, import the navigating object and add a message to the nav bar:

src/routes/+layout
<script>
	import { page, navigating } from '$app/state';

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

{@render children()}
<script lang="ts">
	import { page, navigating } from '$app/state';

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

{@render children()}

在 SvelteKit 2.12 之前,你必须为此使用 $app/stores,它为 $navigating 存储提供相同的信息。如果你目前正在使用 $app/stores,我们建议你迁移到 $app/state(需要 Svelte 5)。

¥[!NOTE] Prior to SvelteKit 2.12, you had to use $app/stores for this, which provides a $navigating store with the same information. If you’re currently using $app/stores, we advise you to migrate towards $app/state (requires Svelte 5).

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