前端路由的原理

什么是路由

简单的说 路由就是根据不同的url地址展示不同的内容或页面

使用场景

前端路由更多的是用在SPA，因为单页面应用都是前后端分离的，后端自然也不会给前端提供路由
前端的路由和后端的路由在实现技术上不一样，但是原理都是一样的。在html5中的hisstory Api 出现之前，前端的路由是通过hash来实现的，hash能兼容低版本的浏览器、

两种实现前端路由的方式

H5中两个新增的api history.pushState 和 history.replaceState两个Api都会操作浏览器的历史记录，而不会引起页面刷新。
Hash就是url 中看到 # ,我们需要一个根据监听哈希变化触发的事件( hashchange) 事件。我们用 window.location 处理哈希的改变时不会重新渲染页面，而是当作新页面加到历史记录中，这样我们跳转页面就可以在 hashchange 事件中注册 ajax 从而改变页面内容。

优点

从性能和用户体验的层面来比较的话，后端路由每次访问一个新页面的时候都要向服务器发送请求，然后服务器再响应请求，这个过程肯定会有延迟。而前端路由在访问一个新页面的时候仅仅是变换了一下路径而已，没有了网络延迟，对于用户体验来说会有相当大的提升。

缺点

使用浏览器的前进，后退键的时候会重新发送请求，没有合理地利用缓存。