有時候,您可能需要同時使用伺服器載入函式和通用載入函式。例如,您可能需要從伺服器傳回資料,但也需要傳回一個無法序列化為伺服器資料的值。
在這個範例中,我們希望根據從 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
。
1
2
3
4
5
6
<script>
let { data } = $props();
</script>
<data.component message={data.message} />