使用 html5 历史代替哈希 url 来恢复用户的历史

Question

我们有一个基于查询字符串加载结果的单页应用程序。

查询字符串如下所示： ?city=德里&pn=1

SPA 在同一个网页上有不同的部分。当用户导航到这些部分时，我们使用哈希更改来维护历史记录。例如： ?city=Delhi&pn=1#sort ：显示 SPA 的排序参数部分。 ?city=Delhi&pn=1#filters : 显示 SPA 的过滤器部分。

我们现在计划放弃使用 url 中的哈希更改来维护历史记录，而是开始使用 html5 历史记录 API。

如何替换这些哈希并使用历史插件执行相同的功能？

我尝试使用 + 号，例如 (?city=Delhi&pn=1+sort)。但看起来用户无法为此添加书签，并且页面会中断，因为 api 不处理 + 符号。 + 号在 ajax api 请求中被当作空格。

还有哪些优雅的处理方式？

Answer 1

对查询字符串中的数据进行编码的标准方法是添加另一个键=值对。

?city=Delhi&pn=1&sort=true

---

请注意，如果您使用的是历史 API，那么您应该拥有能够生成与 JavaScript 生成的相同视图的服务器端代码。

例如

1. 用户到达/，获取服务器下发的首页
2. 用户点击指向/?city=Delhi&pn=1&sort=true 的链接，Ajax 将页面转换为另一个页面。
3. 用户书签链接
4. 用户离开
5. 用户改天回到他们的书签，服务器（不是 JavaScript）构建 /?city=Delhi&pn=1&sort=true
6. 用户点击另一个链接，JS 启动

这意味着：

• 站点在初始加载时执行速度更快。您不必加载主页，然后等待 JS 发出其他请求将其转换为您最初要求的页面。
• 它是搜索引擎的好食物
• 它继续工作when JS fails。