Skip to main content
Svelte 基础
介绍
响应式
属性
逻辑
事件
绑定
类和样式
Actions
过渡动画
Svelte 进阶
高级响应性
复用内容
Motion
高级绑定
高级过渡效果
Context API
特殊元素
<script module>
后续步骤
SvelteKit 基础
介绍
路由
加载数据
请求头和 Cookie
共享模块
表单
API 路由
$app/state
错误和重定向
SvelteKit 进阶
钩子函数
页面选项
链接选项
高级路由
高级加载
环境变量
结论

当用户从一个页面导航到另一个页面时,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 进行失效处理。

在 GitHub 编辑此页面

1