当用户从一个页面导航到另一个页面时,SvelteKit 会调用你的 load
函数,但仅在它认为有内容发生变化时才会这样做。
在这个例子中,在时区之间导航会导致 src/routes/[...timezone]/+page.js
中的 load
函数重新运行,因为 params.timezone
已失效。但是 src/routes/+layout.js
中的 load
函数并_不会_重新运行,因为就 SvelteKit 而言,它并未因导航而失效。
我们可以使用 invalidate(...)
函数手动使其失效,该函数接受一个 URL 并重新运行依赖于它的所有 load
函数。因为 src/routes/+layout.js
中的 load
函数调用了 fetch('/api/now')
,所以它依赖于 /api/now
。
在 src/routes/[...timezone]/+page.svelte
中,添加一个 onMount
回调,每秒调用一次 invalidate('/api/now')
:
src/routes/[...timezone]/+page
<script>
import { onMount } from 'svelte';
import { invalidate } from '$app/navigation';
let { data } = $props();
onMount(() => {
const interval = setInterval(() => {
invalidate('/api/now');
}, 1000);
return () => {
clearInterval(interval);
};
});
</script>
<h1>
{new Intl.DateTimeFormat([], {
timeStyle: 'full',
timeZone: data.timezone
}).format(new Date(data.now))}
</h1>
<script lang="ts">
import { onMount } from 'svelte';
import { invalidate } from '$app/navigation';
let { data } = $props();
onMount(() => {
const interval = setInterval(() => {
invalidate('/api/now');
}, 1000);
return () => {
clearInterval(interval);
};
});
</script>
<h1>
{new Intl.DateTimeFormat([], {
timeStyle: 'full',
timeZone: data.timezone
}).format(new Date(data.now))}
</h1>
你也可以向
invalidate
传递一个函数,以便根据模式而不是特定 URL 进行失效处理。
1