如何在追加URL查询字符串时阻止页面刷新？

嘿，我懂你遇到的麻烦了——直接给document.location赋值确实会触发页面刷新，这完全不是你想要的效果！

问题根源 #

你原来的代码：

var myURL = document.location; 
document.location = myURL + "#login"

这里的document.location是一个Location对象，当你把它和字符串"#login"拼接时，它会自动转换成当前页面的完整URL字符串，然后赋值给document.location的行为会让浏览器认为你要导航到一个新页面，所以就触发了刷新。

正确的解决方案 #

要修改URL的哈希部分（就是#后面的内容）同时不刷新页面，直接操作location.hash属性就可以了——浏览器专门提供了这个属性来处理哈希修改，完全不会触发页面重载：

// 直接设置哈希值，页面不会刷新
window.location.hash = "login";

这样执行后，URL就会变成www.domain.com#login，页面保持当前状态，不会重新加载。

额外优化（可选） #

如果你想避免重复设置相同的哈希值（虽然重复设置也不会刷新，但更严谨），可以加个判断：

if (window.location.hash !== "#login") {
  window.location.hash = "login";
}

内容的提问来源于stack exchange，提问作者Sagu K