很多场景不是完全独立的。
比如你的剧院网站，所有页面都可能共用：
- 顶部导航
- 登录状态
- 当前城市
- 票务入口
- 页脚
这就是 +layout 的职责。
它不是“顺手套一层壳”，而是共享舞台骨架。
<!-- src/routes/+layout.svelte -->
<script lang="ts">
import type { LayoutProps } from './$types';
let { data, children }: LayoutProps = $props();
</script>
<header class="shell">
<a href="/">星尘剧场</a>
<nav>
<a href="/plays">剧目</a>
<a href="/box-office">订票</a>
</nav>
{#if data.user}
<strong>{data.user.name}</strong>
{:else}
<a href="/login">登录</a>
{/if}
</header>
<main>
{@render children()}
</main>// src/routes/+layout.server.ts
import type { LayoutServerLoad } from './$types';
export const load: LayoutServerLoad = async ({ locals }) => {
return {
user: locals.user ?? null
};
};把它翻成剧场语言：
+layout.svelte = 大舞台固定框架
+layout.server.ts = 每次开场前给这层舞台准备公共信息更重要的是，layout 会向下覆盖子目录。
这意味着剧院大厅、二楼小剧场、后台管理区，都可以有自己的局部布景层。