在单页应用中，如何优雅的监听url的变化

---

  单页应用的原理从早起的根据url的hash变化，到根据H5的history的变化，实现无刷新条件下的页面重新渲染。那么在单页应用中是如何监听url的变化呢，本文将总结一下，如何在单页页面中优雅的监听url的变化。

• 单页应用原理
• 监听url中的hash变化
• 监听通过history来改变url的事件
• replaceState和pushState行为的监听

---

原文在我的博客中：https://github.com/forthealllight/blog/issues/37

欢迎star

一、单页应用原理

  单页应用的原理，在我们的上一篇文章中React-Router源码阅读已经讲的很详细，这里做一个简单介绍。单页应用使得页面可以在无刷新的条件下重新渲染，通过hash或者html5 Bom对象中的history可以做到改变url，但是不刷新页面。

(1)通过hash来实现单页路由

  早期的前端路由是通过hash来实现的：

  改变url的hash值是不会刷新页面的。

  因此可以通过hash来实现前端路由，从而实现无刷新的效果。hash属性位于location对象中，在当前页面中，可以通过：

window.location.hash='edit'

来实现改变当前url的hash值。执行上述的hash赋值后，页面的url发生改变。

赋值前：http://localhost:3000
赋值后：http://localhost:3000/#edit

在url中多了以#结尾的hash值，但是赋值前后虽然页面的hash值改变