Skip to main content
基本 Svelte
介绍
反应性
属性
逻辑
事件
绑定
类和样式
动作
转换
高级 Svelte
高级反应性
重用内容
运动
高级绑定
高级转换
上下文 API
特殊元素
<script module>
后续步骤
基本 SvelteKit
介绍
路由
加载数据
标题和 cookie
共享模块
表单
API 路由
$app/state
错误和重定向
高级 SvelteKit
钩子
页面选项
链接选项
高级路由
高级加载
环境变量
结论

从本质上讲,SvelteKit 的工作归结为三件事:

¥At its core, SvelteKit’s job boils down to three things:

  1. 路由 — 找出哪个路由与传入请求匹配

    ¥Routing — figure out which route matches an incoming request

  2. 加载 — 获取路由所需的数据

    ¥Loading — get the data needed by the route

  3. 渲染 — 生成一些 HTML(在服务器上)或更新 DOM(在浏览器中)

    ¥Rendering — generate some HTML (on the server) or update the DOM (in the browser)

我们已经了解了路由和渲染的工作原理。让我们谈谈中间部分 — 加载。

¥We’ve seen how routing and rendering work. Let’s talk about the middle part — loading.

你的应用的每个页面都可以在 +page.server.js 文件中和 +page.svelte 文件中声明一个 load 函数。正如文件名所示,此模块仅在服务器上运行,包括客户端导航。让我们添加一个 src/routes/blog/+page.server.js 文件,这样我们就可以用实际的博客文章数据替换 src/routes/blog/+page.svelte 中的硬编码链接:

¥Every page of your app can declare a load function in a +page.server.js file alongside the +page.svelte file. As the file name suggests, this module only ever runs on the server, including for client-side navigations. Let’s add a src/routes/blog/+page.server.js file so that we can replace the hard-coded links in src/routes/blog/+page.svelte with actual blog post data:

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 加载数据,但现在我们将这样做。

¥[!NOTE] For the sake of the tutorial, we’re importing data from src/routes/blog/data.js. In a real app, you’d be more likely to load the data from a database or a CMS, but for now we’ll do it like this.

我们可以通过 data 属性访问 src/routes/blog/+page.svelte 中的这些数据:

¥We can access this data in src/routes/blog/+page.svelte via the data prop:

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>

现在,让我们对帖子页面执行相同的操作:

¥Now, let’s do the same for the post page:

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 页面进行响应:

¥There’s one last detail we need to take care of — the user might visit an invalid pathname like /blog/nope, in which case we’d like to respond with a 404 page:

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
	};
}

我们将在后面的章节中学习更多关于错误处理的知识。

¥We’ll learn more about error handling in later chapters.

上一页 下一页
1
2
<p>home</p>