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

没有背景

前言

Svelte，一个语法简洁、入门容易，面向未来的前端框架。

从 Svelte 诞生之初，就备受开发者的喜爱，根据统计，从 2019 年到 2024 年，连续 6 年一直是开发者最感兴趣的前端框架 No.1：

Svelte 以其独特的编译时优化机制著称，具有轻量级、高性能、易上手等特性，非常适合构建轻量级 Web 项目。

为了帮助大家学习 Svelte，我同时搭建了 Svelte 最新的中文文档站点。

如果需要进阶学习，也可以入手我的小册《Svelte 开发指南》，语法篇、实战篇、原理篇三大篇章带你系统掌握 Svelte！

欢迎围观我的“网页版朋友圈”、加入“冴羽·成长陪伴社群”，踏上“前端大佬成长之路”。

高级路由

剩余参数

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

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

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

// @noErrors
{
  org: 'sveltejs',
  repo: 'kit',
  branch: 'main',
  file: 'documentation/docs/04-advanced-routing.md'
}

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

404 页面

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

src/routes/
├ marx-brothers/
│ ├ chico/
│ ├ harpo/
│ ├ groucho/
│ └ +error.svelte
└ +error.svelte

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

src/routes/
├ marx-brothers/
+++| ├ [...path]/+++
│ ├ chico/
│ ├ harpo/
│ ├ groucho/
│ └ +error.svelte
└ +error.svelte

/// file: src/routes/marx-brothers/[...path]/+page.js
import { error } from '@sveltejs/kit';

/** @type {import('./$types').PageLoad} */
export function load(event) {
  error(404, 'Not Found');
}

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

可选参数

像 [lang]/home 这样的路由包含一个名为 lang 的必需参数。有时需要让这些参数成为可选的，这样在这个例子中 home 和 en/home 都指向同一个页面。您可以通过将参数包裹在另一对括号中来实现：[[lang]]/home

注意，可选路由参数不能跟在剩余参数后面（[...rest]/[[optional]]），因为参数是"贪婪"匹配的，可选参数永远不会被使用。

匹配

像 src/routes/fruits/