前端路由的原理

什么是路由：根据不同的url地址展示不同的内容或页面。

使用场景：更多的应用在单页面上。

两种实现前端路由的方式：

1、HTML5 History两个新增的API：

history.pushStute、history.replaceState

两个API都会操作浏览器的历史记录，而不会引起页面的刷新

2、Hash 就是url中看到的#。我们需要一个根据监听哈希变化触发的事件hashchange事件。

我们用window.location处理哈希的改变时不会重新渲染页面，而是当作新页面加到历史记录中，这样我们跳转页面就可以在hashchange事件中注册ajax从而改变页面内容。

优点：

前端路由在访问一个新路由的时候仅仅只是变换了一下路径而已，不用经过服务器请求响应，没有了网络延迟，提升了用户体验。

缺点：

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