href - 如何在 SvelteKit 中使用 Relative Href？

Question

我想用 SvelteKit 构建一个 Web 应用程序，其中一页列出所有项目(带有潜在的搜索查询参数)，然后每个单独的项目一页。如果我必须使用后端生成的所有内容以老式方式构建它，我的路径将是 /items/ 用于项目列表，以及 /items/123对于项目 123 等。也就是说，要转到项目 123 的页面，带有 href="123" 的链接将起作用无论您当前是在索引 (/items/) 还是在某个特定项目的页面 (/items/[id])。

使用 SvelteKit，如果我创建文件 routes/items/index.svelte 和 routes/items/[id].svelte，那么 routes/items/index.svelte 将具有路径 /items，没有 尾部斜杠，因此链接为 href="123" 将导致 /123，导致“未找到”错误。

这个相同的链接将在单个项目的页面上工作，例如，/items/456。

这与您在传统 HTML 模型中所拥有的完全不同，在传统 HTML 模型中，来自 /items/(或 /items/index.html)的链接可以工作与来自 /items/[id].html 的链接相同。

现在在 svelte.config.js 中有一个 trailingSlash 选项，您可以将其设置为 always 以便 routes/items/index.svelte对应路径/items/，但是routes/items/[id].svelte有路径/items/[id]/ 我们又遇到了同样的问题:一个 href 值不能同时适用于单个项目的索引和页面。

我现在看到的唯一方法是使用绝对路径，但它不是很可组合。我的猜测是我做错了什么。

Answer 1

您没有遗漏任何东西 - 目前在 SvelteKit 中不可能为某些页面添加尾部斜杠，但对于其他页面则不能。有一个 open GitHub issue您可能对建议添加额外的 trailingSlash 选项感兴趣。此问题引用了您描述的确切问题:

The trailingSlash options introduced in #1404 don't make it straightforward to add trailing slashes to index pages but not to leaf pages. For example you might want to have /blog/ and /blog/some-post rather than /blog and /blog-some-post, since that allows the index page to contain relative links.

在添加该功能之前，您需要使用绝对路径。