从本质上讲，SvelteKit 的工作可以归结为三个方面：
- 路由 — 确定哪个路由匹配传入的请求
- 加载 — 获取路由所需的数据
- 渲染 — 生成 HTML（在服务器上）或更新 DOM（在浏览器中）
我们已经了解了路由和渲染是如何工作的。现在让我们谈谈中间部分 — 加载。
你的应用程序的每个页面都可以在 +page.svelte 文件相邻的 +page.server.js 文件中声明一个 load 函数。正如文件名所示，这个模块只在服务端运行，包括客户端导航时。让我们添加一个 src/routes/blog/+page.server.js 文件，这样我们就可以用实际的博客文章数据替换 src/routes/blog/+page.svelte 中的硬编码链接：
src/routes/blog/+page.server
import { posts } from './data.js';
export function load() {
return {
summaries: posts.map((post) => ({
slug: post.slug,
title: post.title
}))
};
}为了教程需要，我们从
src/routes/blog/data.js导入数据。在实际应用中，你更可能是从数据库或 CMS 加载数据，但现在我们先这样做。
我们可以通过 data 属性在 src/routes/blog/+page.svelte 中访问这些数据：
src/routes/blog/+page
<script>
let { data } = $props();
</script>
<h1>blog</h1>
<ul>
<li><a href="/blog/one">one</a></li>
<li><a href="/blog/two">two</a></li>
<li><a href="/blog/three">three</a></li>
{#each data.summaries as { slug, title }}
<li><a href="/blog/{slug}">{title}</a></li>
{/each}
</ul><script lang="ts">
let { data } = $props();
</script>
<h1>blog</h1>
<ul>
<li><a href="/blog/one">one</a></li>
<li><a href="/blog/two">two</a></li>
<li><a href="/blog/three">three</a></li>
{#each data.summaries as { slug, title }}
<li><a href="/blog/{slug}">{title}</a></li>
{/each}
</ul>现在，让我们对文章页面做同样的处理：
src/routes/blog/[slug]/+page.server
import { posts } from '../data.js';
export function load({ params }) {
const post = posts.find((post) => post.slug === params.slug);
return {
post
};
}src/routes/blog/[slug]/+page
<script>
let { data } = $props();
</script>
<h1>blog post</h1>
<h1>{data.post.title}</h1>
<div>{@html data.post.content}</div><script lang="ts">
let { data } = $props();
</script>
<h1>blog post</h1>
<h1>{data.post.title}</h1>
<div>{@html data.post.content}</div>还有最后一个细节需要处理 — 用户可能会访问无效的路径，比如 /blog/nope，在这种情况下，我们想返回一个 404 页面：
src/routes/blog/[slug]/+page.server
import { error } from '@sveltejs/kit';
import { posts } from '../data.js';
export function load({ params }) {
const post = posts.find((post) => post.slug === params.slug);
if (!post) error(404);
return {
post
};
}我们将在后面的章节中了解更多关于错误处理的内容。
1
2
<p>home</p>