应用程序的不同路由通常会共享一些通用的 UI。与其在每个 +page.svelte 组件中重复这些 UI，我们可以使用 +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()}

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