跳至主要内容

偶尔,你可能需要同时使用服务器加载函数和通用加载函数。例如,你可能需要从服务器返回数据,但也需要返回一个无法作为服务器数据序列化的值。

在这个例子中,我们希望根据从 src/routes/+page.server.js 获取的数据是否为 cool 来从 load 返回不同的组件。

我们可以通过 data 属性在 src/routes/+page.js 中访问服务器数据。

src/routes/+page
export async function load({ data }) {
	const module = data.cool
		? await import('./CoolComponent.svelte')
		: await import('./BoringComponent.svelte');

	return {
		component: module.default,
		message: data.message
	};
}

请注意,数据不会被合并——我们必须从通用 load 函数中显式返回 message

在 GitHub 上编辑此页面

1
2
3
4
5
6
<script>
	let { data } = $props();
</script>
 
<data.component message={data.message} />