如何使用历史API而不是哈希来区分网页上的部分？

Question

我有这个网址： ？域/预算= 0-＆安培; PN = 1

现在我有一个按钮可以点击同一页面上的特殊视图。我这样做了：

？

域/预算= 0-＆安培; PN = 1＃特殊

问题是我正在实现历史api并且哈希值的改变导致popstate被触发，这是不好的。

对于html5历史记录api，我应该使用什么代替哈希？

Answer 1

使用单页应用程序（SPA维基定义为https://en.wikipedia.org/wiki/Single-page_application）

其中单个页面充当页面中按需加载的其他内容的主页。在这种情况下，页面模板的使用确保每个页面在某个时间或另一个页面充当内容主机以及内容页面。 描述了HTML页面的结构。每个都具有页面周围所需的结构以及内容容器，其内部HTML被内容页面中的HTML片段替换。 URL中的标识符表示加载到页面中的页面内容的唯一标识符。

使用历史对象的新成员如此有价值的是，即使您可以以编程方式更改浏览器位置而不回发到服务器，同时更新的位置只不过是常规URL，可以是共享，复制或添加书签。这意味着您需要确保您的应用程序在页面的初始请求时也能像使用JavaScript获取页面时那样工作。

使用history.pushState函数演示如何通过导航到第2页来影响Page 1。保留页面的整体结构，并且在接收到Ajax调用的响应之后，仅将页面片段注入到内容容器中。请注意页面标题如何保持不变，但容器中的URL和内容反映了第2页的内容。

考虑使用pushState导航到第2页后刷新页面。图3显示了页面在刷新时如何保留正确的URL并保留页面内容，但页面标题反映了它是直接从第2页提供的。

此行为是通过具有相同布局结构的所有页面实现的，但在标记中包含标识符以指定页面中的内容片段。这与普通客户端/服务器Web应用程序在页面的标准GET请求上提供完整HTML页面的精神相同，但随后将服务与Ajax调用结合使用，仅更新页面的特定部分。

记住

与新HTML5功能的大多数领域一样，新历史记录对象中的功能可通过填充库获得，该填充库可填补旧浏览器或尚未实施标准的浏览器的空白。