这里说的是另一种hash路由，就是常见的 # 号，这种方式兼容性更好。hash除了这个功能还有另一一种含义：指导浏览器的行为但不上传到服务器。同样需要一个根据监听哈希变化触发的事件 —— hashchange 事件
经常在 url 中看到 #，这个 # 有两种情况，一个是所谓的锚点，比如典型的回到顶部按钮原理、Github 上各个标题之间的跳转等，路由里的 # 不叫锚点，称之为 hash，大型框架的路由系统大多都是哈希实现的。所以，简而言之可以这样理解：改变#后面的值不触发网页重载，但会记录到浏览器history中去。
原理:修改hash的方式实现历史记录（浏览器对hash的修改会记录历史记录）
遵循一种原则，界面无刷新。如果要实现原生应用中类似许多不同页面切换的效果，我们采用的是div切换显示和隐藏。监听地址栏中hash变化驱动界面变化它们的变化记录浏览器会保存在history中，可以通过回退/前进按钮找回，或者history对象中的方法控制。
方法二：ajax+div+historyapi （html5推出的historyapi）
这里不细说每一个 API 的用法，大家可以看 MDN 的文档：https://developer.mozilla.org...重点说其中的两个新增的APIhistory.pushState和history.replaceState相同之处是两个 API 都会操作浏览器的历史记录，而不会引起页面的刷新。不同之处在于，pushState会增加一条新的历史记录，而replaceState则会替换当前的历史记录。
window.history.pushState:方法：为histroy建立历史记录，该方法传入三个函数
1、对应url的信息
2、下一个界面的title
3 、需要你动态改变的地址栏中的url.
这种方式实现要更复杂，开发要自己实现url管理，以达到前进、后退跳转等能力，不过目前都已经有成熟的路由库可以使用，另外基于div模式的SPA，开发需要考虑全局对局部的影响，包括css、事件等。
这种方式的优点是刷新要更轻量，js库和css样式在首次加载即可，局部页面可以只加载少量的数据，并且基于div响应式效果在移动端要更好。因此这也成了目前流行的前端框架angular、react等选用的方案。通过HTML5 History API，实现页面跳转，实现简单的单页面web应用。
方法三：iframe
其一，使用iframe的优点之一就是开发简单，目前的浏览器都已经对iframe url发生修改产生历史记录。
其二，除了响应式问题的兼容性不好之外（也正因此iframe很不适合用在移动端），iframe作为使用多年的浏览器技术之一，在许多方面的兼容性要好许多，也是一些新技术在低版本浏览器上不可用时的替代解决方案，如contentEditable。
其三，iframe与父文档相对独立，可以不受父文档的影响，想必这也是目前一些网站（网易云音乐，QQ空间，各大邮箱）继续使用iframe的主要原因。
原文作者：祈澈姑娘
原文链接：https://www.jianshu.com/u/05f416aefbe1
创作不易，转载请告知
90后前端妹子，爱编程，爱运营，爱折腾。
坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，欢迎大家一起探讨交流。
有个很难涨粉的的公众号叫：【编程微刊】