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:
from
和to
— 具有params
、route
和url
属性的对象¥
from
andto
— objects withparams
,route
andurl
propertiestype
— 导航类型,例如link
、popstate
或goto
¥
type
— the type of navigation, e.g.link
,popstate
orgoto
有关完整的类型信息,请访问
Navigation
文档。¥[!NOTE] For complete type information visit the
Navigation
documentation.
它可用于显示长时间运行导航的加载指示器。在此练习中,src/routes/+page.server.js
和 src/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:
<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).
<h1>home</h1>
<p>this is the home page.</p>