前端两种路由模式的原理与区别

前端路由原理？两种路由的实现方式有什么区别？

一般比较

hash history abstract 前端路由主要应用在SPA（单页面开发）项目中。在无刷新的情况下，根据不同的URL来显示不同的组件或者内容。

1.hash模式

www.test.com/#/就是 Hash URL，当#后面的哈希值发生变化时，可以通过hashchange事件来监听到 URL 的变化，从而进行跳转页面，并且无论哈希值如何变化，服务端接收到的 URL 请求永远是www.test.com。Hash 模式相对来说更简单，并且兼容性也更好。每一次改变#后的部分，都会在浏览器的访问历史中增加一个记录，使用"后退"按钮，就可以回到上一个位置。

2.history模式

History模式是HTML5 新推出的功能，主要使用history.pushState和history.replaceState改变 URL。通过 History 模式改变 URL 同样不会引起页面的刷新，只会更新浏览器的历史记录。当用户做出浏览器动作时，比如点击后退按钮时会触发popState事件。

*popstate 事件*当用户点击浏览器的「前进」、「后退」按钮时，就会触发popstate事件。你可以监听这一事件，从而作出反应。

这里e.state就是当初pushState时传入的第一个参数，state 对象可以是任何可以序列化的东西。由于火狐会将这些对象存储在用户的磁盘上，所以用户在重启浏览器之后这些state对象会恢复。

*replaceState 方法*有时，你希望不添加一个新记录，而是替换当前的记录（比如对网站的 land