在前端框架层出不穷的当今时代,页面的变化变得更加具有迷惑性。页面地址变了的话,是否就意味着一定请求了新的页面么?在h5时代之前,答案是肯定的,肯定请求了新的页面。但是在h5时代全面展开后,这个论断就值得怀疑了,眼见不一定为实。页面地址变化了,但是很有可能浏览器并没有请求服务器。那么,在本文中,苏南大叔就描述的是:如何才能不刷新页面,同时还能够改变URL的方式方法。

苏南大叔:前端路由实现:通过pushState()改变URL,同时不刷新页面 - pushstate-hero
前端路由实现:通过pushState()改变URL,同时不刷新页面(图6-1)

本文测试环境:mac/chrome@73.0.3683.103

基本前提

这里描述一下本文中的相关代码的使用前提:那就是不支持file://这样的协议,必须是http(s)://这样的协议。也就是说:双击本地的html文件打开的时候,会报错。这里先埋下个伏笔,因为这个问题,导致了后续的一系列变化。这里就是根源所在。

Uncaught DOMException: Failed to execute 'pushState' on 'History': A history state object with URL 'file:///code/sunan/weui/test/bar.html' cannot be created in a document with origin 'null' and URL 'file:///code/sunan/weui/test/test.html'.
    at file:///code/sunan/weui/test/test.html:12:17

苏南大叔:前端路由实现:通过pushState()改变URL,同时不刷新页面 - history-pushstate-error
前端路由实现:通过pushState()改变URL,同时不刷新页面(图6-2)

另外,本文中的方法,都是定义在jswindow.history对象上面的。所以,大家可以自行脑补上window.history.相关字样。

特别注意referer来源

这个pushState()replaceState()方法改变页面地址后,这个页面上发出的下一次请求,对应的referer数据也会发生变化。这个不做详细说明,大家看图即可。

苏南大叔:前端路由实现:通过pushState()改变URL,同时不刷新页面 - window-history-pushstate-3
前端路由实现:通过pushState()改变URL,同时不刷新页面(图6-5)

苏南大叔:前端路由实现:通过pushState()改变URL,同时不刷新页面 - window-history-pushstate-4
前端路由实现:通过pushState()改变URL,同时不刷新页面(图6-6)

总结

通过pushState()replaceState()方法改变URL的方法,在一些高级前端框架里面,是非常常见的。由于篇幅限制,那么本文中,苏南大叔主要描述的是URL的变化,这些push进去的数据,如何pop出来,将在下一篇文字中描述,敬请期待。

更多h5新函数应用,可以参见苏南大叔的h5系列文章:

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留链接作者。
本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
未经许可,规模化镜像抄袭本站内容的行为,将会根据有关法律法规进行维权。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。

 【加群】加入QQ群【175454274】和大家一起讨论这个问题

 【源码】本文代码片段及相关软件,请点此获取

 【绝密】秘籍文章入口,仅传授于有缘之人   h5

本站的忠实读者小伙伴,正在阅读下面这些文章: