javascript - 如何在 href 链接上使用 js 参数和 anchor (同一页面)

Question

每次我点击 <a>带有 anchor 和 JavaScript 参数的元素，URL 不会改变，页面只是将我引导到 anchor 元素。例如，当我在“website.com”上单击此超链接时:

<a href="website.com/?par=123#anchor">TEST</a>

页面将滚动到 #anchor 元素，但 URL 仍将是“website.com”，因此 JS 参数不会获得任何值。我试图用这个替换代码:

<a href="website.com/?par=123#anchor" onclick="window.location.reload(true)">

并且页面重新加载，但它仅在滚动到#anchor 元素后重新加载并且它仍然保留在“website.com”上，所以没有成功。

Answer 1

这就是URL hashes的全部目的.它最初设计为滚动到特定的 id在 DOM 中，并且在 History API 之前也被一些 SPA(单页应用程序)框架使用存在，作为在 URL 中表示 JavaScript 状态的解决方案。
因为它代表了网页的状态 在浏览器中 ，是从未发送到服务器 所以浏览器在请求改变时不会再次发送请求，因为当前的 URL(以及服务器端资源)被认为没有改变。
如果您想执行 JavaScript 代码以响应哈希更改事件，您可以这样做:

window.addEventListener('hashchange', () => console.log(window.location.hash));

<a href="#foo">Foo</a>
<a href="#bar">Bar</a>