有时,你可能需要同时使用服务端 load 函数和通用 load 函数。例如,你可能需要从服务端返回数据,但同时也需要返回一个无法序列化为服务端数据的值。
在这个例子中,我们想要根据从 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} />