从根本上说，SvelteKit 的工作可以归结为三件事
- 路由 — 确定哪个路由与传入请求匹配
- 加载 — 获取路由所需的数据
- 渲染 — 生成一些 HTML（在服务器端）或更新 DOM（在浏览器中）
我们已经了解了路由和渲染的工作原理。让我们谈谈中间部分——加载。
你的应用程序的每个页面都可以在 +page.server.js 文件中声明一个 load 函数，该文件与 +page.svelte 文件位于同一位置。顾名思义，此模块仅在服务器上运行，包括客户端导航。让我们添加一个 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 prop 在 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>现在，让我们对帖子页面执行相同的操作
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>还有一个细节我们需要处理——用户可能会访问无效的路径名，例如 /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>