前端路由

内容转载至 https://segmentfault.com/a/1190000011967786 感谢作者分享～

在实现前端路由之前，页面交互主要是通过发请求到后端，然后读取不同的HTML文档，这样的问题是页面交互刷新很频繁。后来出现了SPA（单页应用），就是页面跳转都是无刷新，那是怎么实现的呢。

实质上就是获取url变化，然后解析来匹配路由规则。

hash

因为url中，#后面hash值的变化，并不会向服务器发起请求，而且每次hash值变化后，还会触发hashchange这个事件，让我们知道hash值发生了变化。这个时候可以去匹配我们的路由规则，根据匹配的hash值，把页面内容插到我们的设置的地方。

H5 pushState replaceState

过这两个 API 可以改变 url 地址且不会发送请求。同时还有 onpopstate 事件。通过这些就能用另一种方式来实现前端路由了，但原理都是跟 hash 实现相同的。用了 HTML5 的实现，单页路由的 url 就不会多出一个#，变得更加美观。但因为没有 # 号，所以当用户刷新页面之类的操作时，浏览器还是会给服务器发送请求。为了避免出现这种情况，所以这个实现需要服务器的支持，需要把所有路由都重定向到根页面。