sveltekit-structure

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

SvelteKit Structure

SvelteKit 结构

Quick Start

快速开始

File types:

+page.svelte

(page) |

+layout.svelte

(wrapper) |

+error.svelte

(error boundary) |

+server.ts

(API endpoint)

Routes:

src/routes/about/+page.svelte

→

/about

src/routes/posts/[id]/+page.svelte

→

/posts/123

Layouts: Apply to all child routes.

+layout.svelte

at any level wraps descendants.

文件类型：

+page.svelte

（页面）|

+layout.svelte

（包装器）|

+error.svelte

（错误边界）|

+server.ts

（API端点）

路由：

src/routes/about/+page.svelte

→

/about

src/routes/posts/[id]/+page.svelte

→

/posts/123

布局： 应用于所有子路由。任意层级的

+layout.svelte

都会包裹其子路由页面。

Example

示例

src/routes/
├── +layout.svelte              # Root layout (all pages)
├── +page.svelte                # Homepage /
├── about/+page.svelte          # /about
└── dashboard/
    ├── +layout.svelte          # Dashboard layout (dashboard pages only)
    ├── +page.svelte            # /dashboard
    └── settings/+page.svelte   # /dashboard/settings

svelte

<!-- +layout.svelte -->
<script>
	let { children } = $props();
</script>

<nav><!-- Navigation --></nav>
<main>{@render children()}</main>
<footer><!-- Footer --></footer>

src/routes/
├── +layout.svelte              # 根布局（所有页面）
├── +page.svelte                # 首页 /
├── about/+page.svelte          # /about
└── dashboard/
    ├── +layout.svelte          # 仪表盘布局（仅仪表盘页面）
    ├── +page.svelte            # /dashboard
    └── settings/+page.svelte   # /dashboard/settings

svelte

<!-- +layout.svelte -->
<script>
	let { children } = $props();
</script>

<nav><!-- 导航 --></nav>
<main>{@render children()}</main>
<footer><!-- 页脚 --></footer>

Reference Files

参考文件

file-naming.md - File naming conventions
layout-patterns.md - Nested layouts
error-handling.md - +error.svelte placement
svelte-boundary.md - Component-level error/pending
ssr-hydration.md - SSR and browser-only code

file-naming.md - 文件命名规范
layout-patterns.md - 嵌套布局
error-handling.md - +error.svelte 放置位置
svelte-boundary.md - 组件级错误/待处理状态
ssr-hydration.md - SSR 和仅浏览器端代码

Notes

注意事项

Layouts:
```
{@render children()}
```
| Errors: +error.svelte above failing route
Groups:
```
(name)
```
folders don't affect URL | Client-only: check
```
browser
```
Last verified: 2025-01-11

布局：使用
```
{@render children()}
```
| 错误：+error.svelte 需放在出错路由的上级目录
分组：
```
(name)
```
文件夹不影响URL | 仅客户端代码：检查
```
browser
```
变量
最后验证时间： 2025-01-11