在没有回发的情况下向 URL 添加/删除参数（查询字符串的功能）答案

【问题标题】：Adding/Removing parameters to URL without Postback (Function of query string)在没有回发的情况下向 URL 添加/删除参数（查询字符串的功能）
【发布时间】：2017-09-27 22:45:50
【问题描述】：

谷歌如何在他们的 Gmail 中添加和删除 URL 中的参数而不回发。我在这里指的是他们保存草稿的方式，一旦你点击 compose，你可以看到添加了“？compose=new”参数，一旦你开始撰写，他们就会给它一个 ID。

如何在不回发的情况下操作 URL？我正在考虑使用 `history.pushState({}, document.title, "?querystring=1")

但我很想知道是否有更好的方法也与移动浏览器兼容

谢谢`

【问题讨论】：

标签： javascript jquery asp.net url query-string

【解决方案1】：

Gmail 在 URL 中使用哈希来表示不同的文件夹。举个例子，我打开收件箱或重要文件夹时的URL如下：

https://mail.google.com/mail/u/0/#inbox
https://mail.google.com/mail/u/0/#imp

请注意inbox 和imp 后跟一个哈希。 URL 中散列的含义是它链接到页面的一部分。因此，每当# 之后的 URL 部分发生变化时，浏览器都会识别出该 URL 只是指向同一页面中的一个元素 - 不是指向不同的页面。结果，没有发出服务器请求。

您可以查看这些答案以了解有关如何使用 javascript 使用哈希在页面内导航的更多信息：

https://stackoverflow.com/a/2835151/5894241

https://stackoverflow.com/a/3163635/5894241

借助 Angular 等现代 javascript 框架，网站经常利用此功能来制作单页应用程序 (SPA)。这些框架将使用哈希值识别要加载的页面，然后使用 AJAX 在后台加载该页面的内容，并在不回发的情况下显示它。

您可以在这里看到 Angular 是如何做到这一点的：https://www.w3schools.com/angular/angular_routing.asp

【讨论】：

感谢您的解释，但是如何在不回发的情况下添加查询字符串并将其删除？
嗯，真的很简单。您需要将查询字符串放在 URL 中的哈希之后。例如，对于 gmail，撰写电子邮件的查询字符串是这样的：https://mail.google.com/mail/u/0/#inbox?compose=new，您可以自己测试 - 将任何内容附加到该查询字符串，浏览器将不会发送回发。