如何使相对 Href 在 SvelteKit 中工作？

Question

我想使用 SvelteKit 构建一个 Web 应用程序，其中一页列出所有项目（带有潜在的搜索查询参数），然后一页列出每个单独的项目。如果我必须用后端生成的所有内容以老式方式构建它，我的路径将是/items/所有项目的列表以及/items/123item123等。也就是说，要转到 item 的页面123，链接将带有href="123"will无论您当前处于索引 ( /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一个选项，使其对应于 path ，但随后有了 path ，我们又遇到了同样的问题：一个值无法同时在索引和单个项目的页面中工作。trailingSlashalwaysroutes/items/index.svelte/items/routes/items/[id].svelte/items/[id]/href

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

Answer 1

您没有遗漏任何内容 - 目前在 SvelteKit 中不可能在某些页面上有尾部斜杠，而在其他页面上则不能。您可能会对一个开放的 GitHub 问题感兴趣，建议添加其他trailingSlash选项。这个问题引用了您所描述的确切问题：

#1404 中引入的 TrailingSlash 选项并不能直接将尾部斜杠添加到索引页而不是叶页。例如，您可能想要 /blog/ 和 /blog/some-post 而不是 /blog 和 /blog-some-post，因为这允许索引页面包含相对链接。

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