跳至主要內容

有時候,您可能需要同時使用伺服器載入函式和通用載入函式。例如,您可能需要從伺服器傳回資料,但也需要傳回一個無法序列化為伺服器資料的值。

在這個範例中,我們希望根據從 src/routes/+page.server.js 取得的資料是否為 cool,從 load 傳回不同的元件。

我們可以在 src/routes/+page.js 中透過 data 屬性存取伺服器資料

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} />