如何在 svelte/sapper 组件中相对于当前页面链接？答案

【问题标题】：How to link relative to current page in svelte/sapper component?如何在 svelte/sapper 组件中相对于当前页面链接？
【发布时间】：2019-11-13 17:44:19
【问题描述】：

我在 sapper 模板中有一个带有分页的组件。目前，所有链接的行为都好像它们是相对于 root 的（在这种情况下为 localhost:3000/），无论 href 的形式是 page 还是 /page，（我什至尝试过 ./page。）

因此，对于我只想修改查询字符串的分页，我必须将当前视图的完整路径传递到 href 的组件中，这有点痛苦。有没有我做错了相关链接不起作用？（如果有办法让它们直接调用goto() 就更好了，我有一个“转到页面：[x]”输入。）如果没有，是否有推荐的方法从组件内部获取当前路径，所以我可以把它扔到分页组件中吗？

【问题讨论】：

标签： svelte sapper

【解决方案1】：

目前，Sapper 不支持相对链接。

获取当前路径的最佳方法是使用window.location.href，它仅在组件安装后可用。

这是一个已知问题（“Update to reflect current route?”），已于 2020 年 5 月 4 日移至“讨论中/RFC 提案”：

“目前，所有页面都一样，这意味着您不能使用相对 URL。这是有充分理由引入的，但事实证明它会导致问题。”

【讨论】：

【解决方案2】：

如果您的页面例如是 http://localhost:3000/product/foo，则实际上是可能的解决方法通常在您的 foo.svelte 文件中，指向本地页面的链接应如下所示：

<a href="#anchor"> link to same page </a>

但在 sapper 中，您必须输入页面完整路径：

    <a href="product/foo#anchor"> link to same page </a>

测试： “工兵”：“^0.28.10”， “苗条”：“^3.29.4”

【讨论】：