👽第12节：路由管理（SvelteKit 入门）
—— 构建单页应用的核心导航能力，掌握 SvelteKit 的文件路由机制与动态路由控制
👋 引言：打造现代前端应用的“骨架” —— 路由系统
在构建现代 Web 应用时，路由管理是实现页面切换、用户导航和功能模块划分的关键。Svelte 本身是一个组件库，并不内置路由系统，但官方提供了完整的全栈框架 SvelteKit，它集成了强大的文件驱动式路由机制。
本节课老曹将带你从零入门 SvelteKit 路由系统：
- 理解 SvelteKit 的文件结构与路由映射规则；
- 掌握静态路由、动态路由、嵌套路由的使用方式；
- 学会配置布局组件（Layout）、加载数据（load 函数）；
- 实战练习：创建一个带路由的博客主页、详情页与 404 页面；
这些内容将帮助你快速搭建出具有完整导航结构的 Svelte 应用，为后续学习 SSR、API 路由、部署等进阶能力打下坚实基础。
📚 课程目标
- 理解 SvelteKit 的路由机制与项目结构
- 掌握静态路由与动态路由的定义方式
- 学会在
src/routes目录中组织路由结构 - 能够使用
+layout.svelte创建统一布局模板 - 实战练习：构建一个包含主页、详情页、错误页的博客路由系统
🧱 一、SvelteKit 项目结构概览
SvelteKit 使用 文件驱动的路由系统（File-based Routing），所有页面路径都对应 src/routes/ 目录下的 .svelte 文件或子目录。
✅ 默认目录结构示例：
src/
├── routes/
│ ├── +page.svelte ← 主页（/）
│ ├── about/ ← /about 路由
│ │ └── +page.svelte
│ ├── blog/ ← /blog 路由
│ │ ├── +page.svelte ← 列表页
│ │ └── [slug]/ ← 动态路由，如 /blog/hello-world
│ │ └── +page.svelte ← 详情页
│ └── (admin)/ ← 命名分组（可选，不影响 URL）
│ └── dashboard/
│ └── +page.svelte ← 可通过 /dashboard 访问
└── app.html ← 入口 HTML 模板
⚠️ 注意：SvelteKit v1.0+ 使用
+page.svelte替代旧版的+page.svelte
🔁 二、静态路由与基本页面创建
✅ 示例：创建主页 /
<!-- src/routes/+page.svelte -->
<h1>欢迎来到我的博客</h1>
<a href="/blog">查看文章列表</a>
✅ 示例：创建关于页 /about
<!-- src/routes/about/+page.svelte -->
<h1>关于我</h1>
<p>这是我的个人简介。</p>
访问 /about 即可看到该页面。
🔄 三、动态路由 [slug]
动态路由用于匹配不确定的部分，例如文章 ID 或用户名。
✅ 示例：创建 /blog/[slug] 页面
<!-- src/routes/blog/[slug]/+page.svelte -->
<script>
export let data;
</script>
<h1>{$data.title}</h1>
<p>{$data.content}</p>
✅ 配置 +page.server.js 加载数据（Server-side）
// src/routes/blog/[slug]/+page.server.js
export function load({ params }) {
const posts = {
'hello-world': { title: '你好，世界', content: '这是第一篇文章' },
'my-journey': { title: '我的旅程', content: '讲述我的开发之旅' }
};
if (!posts[params.slug]) {
throw error(404, '文章未找到');
}
return posts[params.slug];
}
访问 /blog/hello-world 即可看到对应的动态内容。
🧩 四、嵌套路由与布局组件
✅ 创建全局布局组件 +layout.svelte
所有子页面都可以继承这个布局：
<!-- src/routes/+layout.svelte -->
<nav>
<a href="/">首页</a>
<a href="/blog">博客</a>
<a href="/about">关于</a>
</nav>
<slot />
✅ 局部布局：为某个路由设置专属布局
<!-- src/routes/blog/+layout.svelte -->
<div class="blog-layout">
<h2>我的博客</h2>
<slot />
</div>
这样 /blog 下的所有子页面都会自动继承该布局。
🚫 五、错误页面处理 +error.svelte
当发生错误时（如 404），SvelteKit 会查找最近的 +error.svelte 文件。
<!-- src/routes/+error.svelte -->
<h1>出错了 😢</h1>
<p>{$error.message}</p>
你也可以为特定路径添加更细粒度的错误页，例如：
src/routes/blog/+error.svelte
💡 六、课堂实战练习
🎯 实战任务：构建一个带路由的博客系统
功能要求：
- 主页 /：展示欢迎信息与跳转链接；
- 关于页
/about：展示作者信息； - 博客列表页
/blog：列出文章标题，点击进入详情； - 博客详情页
/blog/[slug]：显示具体文章内容； - 错误页
/not-found：访问不存在路径时显示 404 提示；
示例代码：
src/routes/blog/+page.svelte
<h2>文章列表</h2>
<ul>
<li><a href="/blog/hello-world">你好，世界</a></li>
<li><a href="/blog/my-journey">我的旅程</a></li>
</ul>
src/routes/blog/[slug]/+page.svelte
<script>
export let data;
</script>
<h1>{$data.title}</h1>
<p>{$data.content}</p>
src/routes/blog/[slug]/+page.server.js
export function load({ params }) {
const posts = {
'hello-world': { title: '你好，世界', content: '这是第一篇文章' },
'my-journey': { title: '我的旅程', content: '讲述我的开发之旅' }
};
if (!posts[params.slug]) {
throw error(404, '文章未找到');
}
return posts[params.slug];
}
📝 七、总结
本节课我们系统掌握了：
- SvelteKit 的文件驱动式路由机制
- 如何创建静态路由与动态路由
- 使用
+layout.svelte统一页面结构 - 使用
+page.server.js在服务端加载数据 - 实战构建了一个完整的博客路由体系
这些知识是构建大型 SvelteKit 应用、支持 SPA 导航和 SSR 渲染的基础。下一讲我们将进入 HTTP 请求与 API 调用的学习，进一步提升前后端交互的能力。
📘 附录资源推荐
- SvelteKit 官方文档 - Routing
- SvelteKit + Tailwind CSS 快速集成指南
- VSCode 插件推荐：
Svelte for VS CodePrettier+ESLint配合格式化与规范检查
🎯 课后作业
- 扩展博客系统，支持从远程 API 获取文章列表。
- 在
/contact页面中加入联系表单，提交后跳转/thank-you。 - 尝试为
/admin添加命名分组，并为其创建独立布局。
🤖 10大高频面试题（含答案）
✅ Q1: SvelteKit 是什么？它与 Svelte 的关系是什么？
答：
SvelteKit 是基于 Svelte 构建的全栈框架，提供路由、SSR、API 路由、打包部署等功能。它是 Svelte 的官方配套框架。
✅ Q2: SvelteKit 的路由系统是如何工作的？
答：
使用 文件驱动的路由系统（File-based Routing），每个 .svelte 页面文件对应一个路由路径，如 /about 对应 /src/routes/about/+page.svelte。
✅ Q3: 如何创建动态路由？
答：
使用 [slug] 目录或文件名表示动态参数：
src/routes/blog/[slug]/+page.svelte
可以通过 $page.params.slug 获取参数值。
✅ Q4: 如何共享多个页面的公共布局？
答：
创建 +layout.svelte 文件，放在任意 routes/ 目录下，其子页面将自动继承该布局。
✅ Q5: 如何在服务端加载页面数据？
答：
使用 +page.server.js 中的 load 函数获取数据：
export function load() {
return { data: fetchData() };
}
✅ Q6: 如何自定义 404 页面？
答：
创建 +error.svelte 文件，它会在抛出错误或找不到页面时显示。
<script context="module">
export let status;
export let error;
</script>
<h1>{status}: {error.message}</h1>
✅ Q7: SvelteKit 支持 SSR 吗？如何启用？
答：
是的，默认支持 SSR。你可以使用 adapter-node 或 adapter-static 控制部署模式。
✅ Q8: 如何实现客户端路由跳转？
答：
使用 <a href="/target"> 或 JavaScript 跳转：
import { goto } from '$app/navigation';
goto('/target');
✅ Q9: 如何在不同布局之间切换？
答：
使用 (group) 分组机制，创建不同的布局层级：
src/routes/(marketing)/home/+layout.svelte
src/routes/(app)/dashboard/+layout.svelte
✅ Q10: 如何优化页面加载性能？
答：
- 使用
+page.js的load函数预加载数据； - 使用
preloadData提前加载目标页面数据； - 使用
+layout.svelte减少重复渲染；
🎯 总结：
这些问题覆盖了 SvelteKit 的路由机制、动态路由、布局组件、数据加载、404 页面、分组机制、SSR 支持等核心知识点，适合大家用于初级到中级前端岗位的面试准备。掌握这些内容将帮助你构建出具备专业级导航结构的 Svelte 应用，并为进一步学习 API 请求、SSR、部署等进阶技能打下坚实基础。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
