一、前端路由存在的意义
前端路由主要应用在spa项目中。
核心---在无刷新（不向后端发送请求）的情况下，可以根据不同url更改视图。
在 Web 前端单页应用 SPA(Single Page Application)中，路由描述的是 URL 与 UI 之间的映射关系，这种映射是单向的，即 URL 变化引起 UI 更新（无需刷新页面）。目前前端路由主要就是两种hash和history。他们的共同点就是在更改当前网站页面的url，监听url路径的变化，匹配路由规则显示相应的想要展示的内容（不会像后台发出请求更改页面）。
1.hash路由
有个#号，在hash值发生变化的时候，通过hashchange函数来监听hash#后面路由值的变化。根据hash值的不同（也就是不同的路由）来更改所要展示的页面信息。
比如这个 URL：http://www.abc.com/#/hello，hashURL模式中#后面的就是hash值，当hash值发生变化时，
可以通过hashChange事件监听到url的变化，从而进行页面跳转。每一次改变#后的部分，都会在浏览器的访问历史中
增加一个记录，使用“后退”按钮，就可以回到上一个位置。
注意：无论hash值如何变化，服务器接收到的HTTP请求中url永远是#前面的http://www.abc.com；对后端完全没有
影响，因此改变 hash 不会重新加载页面。
2.history路由
监听 url 中的路径变化，需要客户端和服务端共同的支持。因为在路由改变时候不会重新向服务端发送请求，但是在刷新页面时，会向服务端重新发送请求，如果服务端没有作配置，那么就会显示404.
通过浏览器的window.history模式来记录页面的的历史记录
是HTML5新推出的功能。主要使用history.pushState() 和history.replaceState() 方法。同时还有一个新的
popState事件（当用户做出浏览器动作，例如点击“前进”、“后退”按钮时，触发popState事件），通过监听这一事件，
配合上面这两个方法应用于浏览器的历史记录栈，在当前已有的 back、forward、go 的基础之上，提供了对当前浏览
器进行修改的功能，实现改变了当前的 URL，但浏览器不会立即向后端发送请求。
注意：history模式更改url不会向后端发送请求，但是如果点击刷新，就会向后端发送请求。
二、两种模式的区别
1.history模式可以通过api设置任意的同源url，hash模式只可以更改#后的内容；
2.history模式可以通过api添加任意类型的数据到历史记录中，hash模式只能更改hash值，也就是字符串；
3.history模式设置的新 URL 可以与当前 URL 一模一样，这样也会把记录添加到栈中；
hash 设置的新值必须与原来不一样才会触发动作将记录添加到栈中；
4.hash模式无需后端配置，且兼容性好。
history模式在用户手动输入url地址或刷新页面时会发起url请求，前端的 URL 必须和实际向后端发起请求的 URL 一
致，如 http://www.abc.com/book/id。如果后端缺少对 /book/id 的路由处理，将返回 404 错误。后端需要配置
index.html页面用于匹配不到静态资源的时候，同时在前端处理404。
5.history模式可额外设置 title 属性供后续使用。
三、使用场景
一般场景下，hash 和 history 都可以，除非你更在意颜值，# 符号夹杂在 URL 里看起来确实有些不太美丽。
如果不想要很丑的 hash，我们可以用路由的 history 模式，这种模式充分利用history.pushState API 来完成URL 跳转而无须重新加载页面。