SvelteKit 的核心是一个基于文件系统的路由器*。您的应用程序的路由——即用户可以访问的 URL 路径——由代码库中的目录定义：*
* `src/routes` 是根路由
* `src/routes/about` 创建了一个 `/about` 路由
* `src/routes/blog/[slug]` 创建了一个带有 *参数* 的路由，`slug`，可以在用户请求类似 `/blog/hello-world` 的页面时动态加载数据
> \[!注意\] 您可以通过编辑 [项目配置](configuration) 将 `src/routes` 改为不同的目录。
每个路由目录包含一个或多个*路由文件*，可以通过它们的`+`前缀来识别。
我们将稍后更详细地介绍这些文件，但这里有一些简单的规则可以帮助您记住 SvelteKit 的路由工作方式：
* 所有文件都可以在服务器上运行
* 所有文件都在客户端运行，除了`+服务器`文件
* `+layout` 和 `+error` 文件同样适用于子目录以及它们所在的目录
##
+页面
### +page.svelte
一个 `+page.svelte` 组件定义了您的应用页面。默认情况下，页面在服务器（[SSR](glossary#SSR)）上对初始请求进行渲染，并在浏览器（[CSR](glossary#CSR)）上对后续导航进行渲染。
```svelte
Hello and welcome to my site!
About my site
```
```svelte
About this site
TODO...
Home
```
> \[注意\] SvelteKit 使用``元素在路由之间导航，而不是框架特定的``组件。
页面可以通过`load`函数通过`data`属性接收数据。
```svelte
{data.title}
{@html data.content}
```
> \[!旧版\] `PageProps` 在 2.16.0 版本中添加。在早期版本中，您必须手动输入 `data` 属性，使用 `PageData` 代替，参见 \[类型\](#\\types)。
>
> 在 Svelte 4 中，您将使用 `export let data` 代替。
### +page.js
通常，页面在渲染之前需要加载一些数据。为此，我们添加了一个 `+page.js` 模块，该模块导出了一个 `load` 函数：
```js
/// file: src/routes/blog/[slug]/+page.js
import { error } from '@sveltejs/kit';
/** @type {import('./$types').PageLoad} */
export function load({ params }) {
if (params.slug === 'hello-world') {
return {
title: 'Hello world!',
content: 'Welcome to our blog. Lorem ipsum dolor sit amet...'
};
}
error(404, 'Not found');
}
```
此函数与`+page.svelte`并行运行，这意味着它在服务器端渲染期间在服务器上运行，在客户端导航期间在浏览器中运行。有关 API 的完整详细信息，请参阅`load`。
除了`load`，`+page.js`还可以导出配置页面行为的值：
* `export const prerender = true` 或 `false` 或 `'auto'`
* `export const ssr = true` 或 `false`
* `export const csr = true` 或 `false`
您可以在[页面选项](page-options)中找到更多关于这些信息。
### +page.server.js
如果您的`load`函数只能在服务器上运行——例如，如果它需要从数据库获取数据或您需要访问像 API 密钥这样的私有[环境变量]($env-static-private)——那么您可以重命名`+page.js`为`+page.server.js`并将`PageLoad`类型更改为`PageServerLoad`。
```js
/// file: src/routes/blog/[slug]/+page.server.js
// @filename: ambient.d.ts
declare global {
const getPostFromDatabase: (slug: string) => {
title: string;
content: string;
}
}
export {};
// @filename: index.js
// ---cut---
import { error } from '@sveltejs/kit';
/** @type {import('./$types').PageServerLoad} */
export async function load({ params }) {
const post = await getPostFromDatabase(params.slug);
if (post) {
return post;
}
error(404, 'Not found');
}
```
在客户端导航期间，SvelteKit 将从服务器加载此数据，这意味着返回的值必须使用[devalue](https://github.com/rich-harris/devalue)进行序列化。请参阅[`load`](load)以获取 API 的完整详细信息。
与`+page.js`类似，`+page.server.js`可以导出[页面选项](page-options)——`预渲染`、`服务器端渲染`和`客户端渲染`。
一个 `+page.server.js` 文件也可以导出 *actions*。如果 `load` 允许您从服务器读取数据，`actions` 则允许您使用 `