偶尔,你可能需要同时使用服务器加载函数和通用加载函数。例如,你可能需要从服务器返回数据,但也需要返回一个无法作为服务器数据序列化的值。
在这个例子中,我们希望根据从 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
。
1
2
3
4
5
6
<script>
let { data } = $props();
</script>
<data.component message={data.message} />