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

【问题标题】：How to Make Relative Href Work in SvelteKit?如何使相对 Href 在 SvelteKit 中工作？
【发布时间】：2022-02-17 07:18:52
【问题描述】：

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

使用 SvelteKit，如果我创建文件 routes/items/index.svelte 和 routes/items/[id].svelte，则 routes/items/index.svelte 将具有路径 /items，没有尾随斜杠，因此链接带有 @987654332 @ 将导致/123，从而导致“未找到”错误。

但是，从单个项目的页面（例如，/items/456）可以使用相同的链接。

这与您在传统 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 值不能同时用于单个项目的索引和页面。

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

【问题讨论】：

问题：将 href 的基本路径作为具有默认值的道具，然后在组件内部动态连接 ID 以生成 href 是否有帮助？然后，您可以传入一个可选的 prop 以根据需要更改基本路径，但默认设置最常见的情况。
@NikP 是的，只要相对路径不起作用（请参阅已接受的答案），我将不得不采用您所描述的方式

标签： href svelte sveltekit

【解决方案1】：

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

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

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

【讨论】：