当用户从一个页面导航到另一个页面时，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