javascript - 在不回发的情况下向 URL 添加/删除参数(查询字符串的功能)

Question

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

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

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

谢谢`

Answer 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