SvelteKit 最新中文文档教程（12）—— 高级路由

前言

Svelte，一个语法简洁、入门容易，面向未来的前端框架。
从 Svelte 诞生之初，就备受开发者的喜爱，根据统计，从 2019 年到 2024 年，连续 6 年一直是开发者最感兴趣的前端框架 No.1：

Svelte 以其独特的编译时优化机制著称，具有轻量级、高性能、易上手等特性，非常适合构建轻量级 Web 项目。
为了帮助大家学习 Svelte，我同时搭建了 Svelte 最新的中文文档站点。
如果需要进阶学习，也可以入手我的小册《Svelte 开发指南》，语法篇、实战篇、原理篇三大篇章带你系统掌握 Svelte！
欢迎围观我的“网页版朋友圈”、加入“冴羽·成长陪伴社群”，踏上“前端大佬成长之路”。
高级路由

剩余参数

如果路由段的数量未知，您可以使用剩余语法 — 例如您可以像这样实现 GitHub 的文件查看器...

1. /[org]/[repo]/tree/[branch]/[...file]

复制代码

...在这种情况下，对 /sveltejs/kit/tree/main/documentation/docs/04-advanced-routing.md 的请求将导致以下参数可供页面使用：

1. // @noErrors
2. {
3.   org: 'sveltejs',
4.   repo: 'kit',
5.   branch: 'main',
6.   file: 'documentation/docs/04-advanced-routing.md'
7. }

复制代码

[!NOTE] src/routes/a/[...rest]/z/+page.svelte 将匹配 /a/z（即完全没有参数）以及 /a/b/z 和 /a/b/c/z 等。请确保检查剩余参数的值是否有效，例如使用匹配器。

404 页面

剩余参数还允许您渲染自定义 404。给定这些路由...

1. src/routes/
2. ├ marx-brothers/
3. │ ├ chico/
4. │ ├ harpo/
5. │ ├ groucho/
6. │ └ +error.svelte
7. └ +error.svelte

复制代码

...如果您访问 /marx-brothers/karl，marx-brothers/+error.svelte 文件将不会被渲染，因为没有匹配到路由。如果您想渲染嵌套的错误页面，您应该创建一个匹配任何 /marx-brothers/* 请求的路由，并从中返回 404：

1. src/routes/
2. ├ marx-brothers/
3. +++| ├ [...path]/+++
4. │ ├ chico/
5. │ ├ harpo/
6. │ ├ groucho/
7. │ └ +error.svelte
8. └ +error.svelte

复制代码

1. /// file: src/routes/marx-brothers/[...path]/+page.js
2. import { error } from '@sveltejs/kit';
4. /** @type {import('./$types').PageLoad} */
5. export function load(event) {
6.   error(404, 'Not Found');
7. }

复制代码

[!NOTE] 如果您不处理 404 情况，它们将出现在 handleError 中

可选参数

像 [lang]/home 这样的路由包含一个名为 lang 的必需参数。有时需要让这些参数成为可选的，这样在这个例子中 home 和 en/home 都指向同一个页面。您可以通过将参数包裹在另一对括号中来实现：[[lang]]/home
注意，可选路由参数不能跟在剩余参数后面（[...rest]/[[optional]]），因为参数是"贪婪"匹配的，可选参数永远不会被使用。
匹配

像 src/routes/fruits/