你的应用程序的不同路由通常会共享通用的 UI。与其在每个 +page.svelte 组件中重复这些内容，我们可以使用一个 +layout.svelte 组件，它会应用于同一目录中的所有路由。

在这个应用程序中，我们有两个路由，src/routes/+page.svelte 和 src/routes/about/+page.svelte，它们包含相同的导航 UI。让我们创建一个新文件，src/routes/+layout.svelte...

src/routes/
├ about/
│ └ +page.svelte
├ +layout.svelte
└ +page.svelte

...并将 +page.svelte 文件中的重复内容移动到新的 +layout.svelte 文件中。{@render children()} 标签是页面内容将被渲染的地方：

<script>
	let { children } = $props();
</script>

<nav>
	<a href="/">home</a>
	<a href="/about">about</a>
</nav>

{@render children()}

<script lang="ts">
	let { children } = $props();
</script>

<nav>
	<a href="/">home</a>
	<a href="/about">about</a>
</nav>

{@render children()}

+layout.svelte 文件适用于每个子路由，包括同级的 +page.svelte（如果存在）。你可以将布局嵌套到任意深度。