0Pricing
Sveltejs Academy · 课时

可选参数与剩余参数

使用 [[optional]] 处理可选片段,并使用 [...rest] 处理全匹配路由。

可选参数与剩余参数 是 CoddyKit 上的免费 Sveltejs Academy 课时。 这是第 3 节课,共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Sveltejs Academy 学习路径的一部分,你的进度在网页和 CoddyKit 应用中同步。 Sveltejs Academy 课程共包含 4 节课。

可选段

使用双层方括号 [[optional]],将某个段设为可选。

src/routes/[[lang]]/about/+page.svelte

两个网址都能匹配

上面的配置同时匹配 /about 和 /en/about。对于前者,lang 未定义。

剩余参数

使用 [...rest],将路径中剩余的所有段捕获为数组。

src/routes/docs/[...slug]/+page.svelte

捕获多个段

上面的配置匹配 /docs、/docs/a、/docs/a/b 等路径。params.slug 是连接后的字符串。

使用场景

剩余参数适合文档站点、维基和文件浏览器等路径深度不固定的场景。

组合使用

将可选参数和剩余参数与普通参数混合使用,实现灵活的路由配置。

捕获全部段必须放在最后

剩余参数必须是最后一个段;SvelteKit 会强制执行这一规则。

解码

路径段会进行网址解码;构建网址时请对特殊字符进行编码。

空的剩余参数

空的剩余参数会解析为空字符串。请在加载函数中处理这种情况。

有利于 SEO

剩余路由无需构建庞大的路由树,就能提供嵌套文档。

冲突解决

SvelteKit 会优先选择具体路由,而不是剩余路由。静态路由优先于剩余路由。

快速检查

[...slug] 的作用是什么?

回顾

使用 [[opt]] 表示可选段,使用 [...rest] 表示捕获全部段。两者都能提升路由的灵活性。

常见问题解答

「可选参数与剩余参数」课时是免费的吗?

是的 — 「可选参数与剩余参数」的完整文本可在网页上免费阅读。要进行交互式练习(内置代码编辑器和全天候 AI 导师)并解锁 Sveltejs Academy 课程的其余内容,请升级到 CoddyKit PRO。 Sveltejs Academy 课程共包含 4 节课。

「可选参数与剩余参数」这节课中我会学到什么?

使用 [[optional]] 处理可选片段,并使用 [...rest] 处理全匹配路由。 你通过在浏览器中直接运行的动手代码来练习 Sveltejs Academy,全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Sveltejs Academy 需要有经验吗?

无需任何先前经验。CoddyKit 上的 Sveltejs Academy 课程适合初学者到高级学习者,你可以从这里开始或从头开始,按照自己的节奏学习。 这是第 3 节课,共 4 节。

「可选参数与剩余参数」课时需要多长时间?

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动,所以你能稳步进步,并在网页和应用中从离开的地方继续。

我能在这节 Sveltejs Academy 课中编写并运行代码吗?

能。每节 Sveltejs Academy 课都包含内置代码编辑器,你可以在浏览器中直接编写并运行真实代码,并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. 使用 +page.svelte 进行基于文件的路由
  2. 动态路由参数:[id]
  3. 可选参数与剩余参数
  4. 布局文件:+layout.svelte
← 返回 Sveltejs Academy