SvelteKit 最新中文文档教程（12）—— 高级路由
前言Svelte，一个语法简洁、入门容易，面向未来的前端框架。
从 Svelte 诞生之初，就备受开发者的喜爱，根据统计，从 2019 年到 2024 年，连续 6 年一直是开发者最感兴趣的前端框架 No.1：
Svelte 以其独特的编译时优化机制著称，具有轻量级、高性能、易上手等特性，非常适合构建轻量级 Web 项目。
为了帮助大家学习 Svelte，我同时搭建了 Svelte 最新的中文文档站点。
如果需要进阶学习，也可以入手我的小册《Svelte 开发指南》，语法篇、实战篇、原理篇三大篇章带你系统掌握 Svelte！
欢迎围观我的“网页版朋友圈”、加入“冴羽·成长陪伴社群”，踏上“前端大佬成长之路”。
高级路由
剩余参数
如果路由段的数量未知，您可以使用剩余语法 — 例如您可以像这样实现 GitHub 的文件查看器...
///tree//[...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 中
可选参数
像 /home 这样的路由包含一个名为 lang 的必需参数。有时需要让这些参数成为可选的，这样在这个例子中 home 和 en/home 都指向同一个页面。您可以通过将参数包裹在另一对括号中来实现：[]/home
注意，可选路由参数不能跟在剩余参数后面（[...rest]/[]），因为参数是"贪婪"匹配的，可选参数永远不会被使用。
匹配
像 src/routes/fruits/这样的路由会匹配 /fruits/apple，但它也会匹配 /fruits/rocketship。我们不希望这样。您可以通过在 params 目录中添加一个 匹配器 — 它接收参数字符串（"apple" 或 "rocketship"）并在有效时返回 true — 来确保路由参数格式正确...
/// file: src/params/fruit.js
/**
* @param {string} param
* @return {param is ('apple' | 'orange')}
* @satisfies {import('@sveltejs/kit').ParamMatcher}
*/
export function match(param) {
return param === 'apple' || param === 'orange';
}...并增强您的路由：
src/routes/fruits/如果路径名不匹配，SvelteKit 将尝试匹配其他路由（使用下面指定的排序顺序），最终返回 404。
params 目录中的每个模块对应一个匹配器，除了 *.test.js 和 *.spec.js 文件，这些文件可用于对匹配器进行单元测试。
[!NOTE] 匹配器在服务端和浏览器中都会运行。
排序
多个路由可能匹配同一个路径。例如，以下每个路由都会匹配 /foo-abc：
src/routes/[...catchall]/+page.svelte
src/routes/[]/+page.svelte
src/routes//+page.svelte
src/routes/foo-/+page.svelte
src/routes/foo-abc/+page.svelteSvelteKit 需要知道正在请求哪个路由。为此，它根据以下规则进行排序...
[*]更具体的路由具有更高的优先级（例如，没有参数的路由比有一个动态参数的路由更具体，以此类推）
[*]带有匹配器的参数（）比没有匹配器的参数（）具有更高的优先级
[*][] 和 [...rest] 参数将被忽略，除非它们是路由的最后一部分，在这种情况下它们被视为最低优先级。换句话说，x/[]/z 在排序时被视为与 x/z 等同
[*]平局通过字母顺序解决
...导致此排序结果，这意味着 /foo-abc 将调用 src/routes/foo-abc/+page.svelte,而 /foo-def 将调用 src/routes/foo-/+page.svelte 而不是不太具体的路由:
src/routes/foo-abc/+page.svelte
src/routes/foo-/+page.svelte
src/routes/[]/+page.svelte
src/routes//+page.svelte
src/routes/[...catchall]/+page.svelte编码
某些字符不能用于文件系统 — Linux 和 Mac 上的 /，Windows 上的 \ / : * ? " < > |。# 和 % 字符在 URL 中有特殊含义，[ ] ( ) 字符在 SvelteKit 中有特殊含义，所以这些字符也不能直接用作路由的一部分。
如果要在路由中使用这些字符，您可以使用十六进制转义序列，其格式为 ，其中 nn 是十六进制字符代码：
[*]\ —
[*]/ —
[*]: —
[*]* —
[*]? —
[*]" —
[*] —
[*]| —
[*]# —
[*]% —
[*][ —
[*]] —
[*]( —
[*]) —
例如，要创建一个 /smileys/:-) 路由，您需要创建一个 src/routes/smileys/-/+page.svelte 文件。
您可以使用 JavaScript 确定字符的十六进制代码：
':'.charCodeAt(0).toString(16); // '3a'，因此使用 ''您也可以使用 Unicode 转义序列。通常您不需要这样做，因为您可以直接使用未编码的字符，但如果出于某种原因您不能有包含例如表情符号的文件名，那么您可以使用转义字符。换句话说，这些是等效的：
src/routes//+page.sveltesrc/routes/
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
页:
[1]