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

Question

我觉得很困惑，但在Safari和iOS(移动Safari(中打开带有锚链接的URL是不起作用的。所以想象一下，我有一个移动应用程序，其中有一个链接到T&Cs，它不会滚动到那个部分。当我试图将URL复制并粘贴到新的浏览器窗口中时，同样的结果会出现在页面顶部。它唯一有效的时间是当我有目录、页面加载和手动点击锚链接时。

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

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

Chrome、Firefox甚至Edge的工作方式都很有魅力。请帮帮我，因为营销团队认为我不称职。

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

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

Answer 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>