第五章：路由不是“路径映射”，而是剧场的排期表 - 现代前后端完全指南：软件城市宇宙

SvelteKit 的路由是文件系统路由。
这意味着目录结构本身就是舞台排期结构。

例如：

text

src/routes/+page.svelte              -> /
src/routes/about/+page.svelte        -> /about
src/routes/plays/+page.svelte        -> /plays
src/routes/plays/[slug]/+page.svelte -> /plays/:slug

动态路由 [slug] 很重要。
它就像：

text

同一块舞台
根据不同剧目代号
上演不同的那一出戏

一个典型详情页：

// src/routes/plays/[slug]/+page.server.ts
import { error } from '@sveltejs/kit';
import type { PageServerLoad } from './$types';
import { db } from '$lib/server/db';

export const load: PageServerLoad = async ({ params }) => {
  const play = await db.play.findUnique({
    where: { slug: params.slug }
  });

  if (!play) {
    error(404, '该剧目不存在');
  }

  return { play };
};

svelte

<!-- src/routes/plays/[slug]/+page.svelte -->
<script lang="ts">
  import type { PageProps } from './$types';
  let { data }: PageProps = $props();
</script>

<svelte:head>
  <title>{data.play.title} | 星尘剧场</title>
  <meta name="description" content={data.play.summary} />
</svelte:head>

<h1>{data.play.title}</h1>
<p>{data.play.summary}</p>
<p>导演：{data.play.director}</p>
<p>开演时间：{data.play.opensAt}</p>

这段代码的心智不是：

text

页面自己请求数据然后自己想办法渲染

而是：

text

观众访问某个剧目页面时
后台先把这出戏的道具和节目单准备好
再交给舞台组件登场

这就是 SvelteKit 路由与数据耦合得很自然的地方。