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 載入資料，但現在我們將這樣做。
我們可以在 src/routes/blog/+page.svelte 中透過 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>現在，讓我們對文章頁面執行相同的操作
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>