Skip to main content
Svelte 基础
介绍
响应式
属性
逻辑
事件
绑定
类和样式
Actions
过渡动画
Svelte 进阶
高级响应性
复用内容
Motion
高级绑定
高级过渡效果
Context API
特殊元素
<script module>
后续步骤
SvelteKit 基础
介绍
路由
加载数据
请求头和 Cookie
共享模块
表单
API 路由
$app/state
错误和重定向
SvelteKit 进阶
钩子函数
页面选项
链接选项
高级路由
高级加载
环境变量
结论

有时,你可能需要同时使用服务端 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

在 GitHub 编辑此页面

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