svelte - 如何在 Sapper 中创建带有可选参数的路由？

Question

假设我有一条/foo路线。但有时人们会遇到/foo一个语言参数：/fr/foo. 而其他时候，他们可能会用一种语言和一个国家来击中它：/ca/fr/foo

所以我需要一个路由表

[country]/[language]/foo 
[language]/foo 
/foo

所有这些都直接指向同一页面。

我应该创建这样的树吗？

src/routes
└── [country]
    └── [language]
        └── foo.svelte

[language]/foo如果这是答案，那么我该如何指导[country]/[language]/foo？

score 8 · Accepted Answer

尚不支持可选参数，但您几乎可以使用“休息路线”（我刚刚意识到尚未记录 ‍♂️）来伪造它——将使用包含前面段的数组进行routes/[...parts]/foo.svelte渲染。foo.sveltepage.params.parts

不幸的是，这不匹配/foo，它可以说应该。我提出了一个问题：https ://github.com/sveltejs/sapper/issues/765

score 1 · Accepted Answer

就我而言，我需要 /dashboard/reset/TOKEN/ID 路由。我使它与以下结构一起工作：

[acool@localhost cool-sapper-project]$ tree src/routes/
src/routes/
├── dashboard
│   ├── reset
│   │   └── [...parts].svelte

以上将使 TOKEN 和 ID 参数params在您的页面中可用：

<script context="module">
 export async function preload({ params }, session) {
 console.log(JSON.stringify(params));
}
</script>

输出：

{"parts":["2fd4e1c67a2d28fced849ee1bb76e7391b93eb12","1"]}

祝你好运！

2 回答 2