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

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 issues 感兴趣，建议添加额外的

trailingSlash

选项。这个问题引用了您所描述的确切问题：

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

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