带有锚链接的 NuxtJS 页面 URL 在桌面 Safari 和 iOS 上不起作用答案

【问题标题】：NuxtJS page URL with anchor links not working on desktop Safari and iOS带有锚链接的 NuxtJS 页面 URL 在桌面 Safari 和 iOS 上不起作用
【发布时间】：2021-08-20 10:27:51
【问题描述】：

我觉得莫名其妙，但在 Safari 和 iOS（移动 Safari）中无法打开带有锚链接的 URL。所以想象一下，我有一个移动应用程序，其中包含指向我网站上 T&C 中特定部分的链接，但它不会滚动到该部分。当我尝试将 URL 复制并粘贴到新的浏览器窗口中时，相同的结果 - 停留在页面顶部。它唯一有效的时候是当我有目录、页面加载并手动单击锚链接时。

我在这里阅读了很多答案，我可以确认：

id="my-anchor" 的锚定元素肯定存在于页面源中
我在 URL 的末尾有一个斜杠，在锚点之前
当我打开 http://www.example.com/my-page/#my-anchor 时，我没有收到任何重定向，我可以看到它是 200 响应（所以关于 Safari 在重定向时失去锚点的论点不起作用）
我们试图链接的锚定元素是标题

Chrome、Firefox 甚至 Edge 都像魅力一样工作。请帮助我，因为营销团队认为我无能。

罪魁祸首是版本 14.1.1 (16611.2.7.1.4)。

页面是使用 Nuxt 框架 (VueJS) 生成的。

【问题讨论】：

我也有同样的问题。没有这方面的文档，无法确定这是 Nuxt 特定问题还是原始 Safari 错误

标签： vue.js url safari nuxt.js anchor

【解决方案1】：

这对我有用，我不完全确定为什么。

<nuxt-link 
    :to="{ path: link.url, hash: (link.anchor ? '#' + link.anchor : '')}">
    {{ link.label }}
</nuxt-link>

我碰巧传入了导航项目，因此混合了锚点和普通链接，但我同样可以将以下内容用于一次性链接。同样，我不确定为什么像这样拆分它修复了 iOS Safari 错误，但它确实对我有用

<nuxt-link to="{ path: '/', hash: '#contact-form'}">
    Contact
</nuxt-link>

【讨论】：