前端路由的hash模式和history模式

从用户的角度看，前端路由主要实现了两个功能（使用ajax更新页面状态的情况下）：

1. 记录当前页面的状态（保存或分享当前页的url，再次打开该url时，网页还是保存（分享）时的状态）；
2. 可以使用浏览器的前进后退功能（如点击后退按钮，可以使页面回到使用ajax更新页面之前的状态，url也回到之前的状态）；

作为开发者，要实现这两个功能，我们需要做到：

1. 改变url且不让浏览器向服务器发出请求；
2. 监测 url 的变化；
3. 截获 url 地址，并解析出需要的信息来匹配路由规则。

和vue的关系

Vue 这类渐进式前端开发框架，为了构建 SPA（单页面应用），需要引入前端路由系统，这也就是 Vue-Router 存在的意义。前端路由的核心，就在于 —— 改变视图的同时不会向后端发出请求。为实现此功能，浏览器提供hash和history两种模式。

hash模式

hash 模式是一种把前端路由的路径用井号 # 拼接在真实 URL 后面的模式。hash 也 称作 锚点，本身是用来做页面定位的。当井号 # 后面的路径发生变化时，浏览器并不会重新发起请求，而是会触发 hashchange 事件。
正是由于 hash 值变化不会导致浏览器向服务器发出请求，而且 hash 改变会触发 hashchange 事件，浏览器的进后退也能对其进行控制，所以人们在 html5 的 history 出现前，基本都是使用 hash 来实现前端路由的。

优点：

1. 兼容性较好（兼容IE8）
2. hash发生变化的url都会被浏览器记录下来

history模式

history API 是 H5 提供的新特性，允许开发者直接更改前端路由，即更新浏览器 URL 地址而不重新发起请求。history api可以分为两大部分，切换和修改，参考MDN，切换历史状态包括back、forward、go三个方法，对应浏览器的前进，后退，跳转操作
优点：

1. 路由正规且无井号#
2. 和hash模式比较，hash 本来是拿来做页面定位的，如果拿来做路由的话，原来的锚点功能就不能用了。其次，hash 的传参是基于 url 的，如果要传递复杂的数据，会有体积的限制，而 history 模式不仅可以在url里放参数，还可以将数据存放在一个特定的对象中。

缺点：

3. 兼容性不如hash模式，兼容到IE10

使用场景

一般情况下，hash和history两个模式都可以。

如果不想要很丑的 hash，我们可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成
URL 跳转而无须重新加载页面。—— Vue-router 官网。