vue-router 有 3 种路由模式：hash、history、abstract。
总览
1) hash模式：hash + hashChange
特点：hash虽然在URL中，但不被包括在HTTP请求中；用来指导浏览器动作，对服务端安全无用，hash不会重加载页面。通过监听 hash（#）的变化来执行js代码 从而实现 页面的改变。
核心代码：
window.addEventListener(‘hashchange‘,function(){
self.urlChange()
})
特点：
hash 虽然出现在 url 中，但不会被包括在 http 请求中，它是用来指导浏览器动作的，对服务器端完全无用，因此，改变 hash 不会重新加载页面。
可以为 hash 的改变添加监听事件：
window.addEventListener("hashchange",funcRef,false)每一次改变 hash(window.localtion.hash)，都会在浏览器访问历史中增加一个记录。
利用 hash 的以上特点，就可以来实现前端路由”更新视图但不重新请求页面”的功能了。
HashHistory 拥有两个方法，一个是 push， 一个是 replace
即：HashHistory.push() 和 HashHistory.replace()
2) history模式：historyApi + popState
HTML5推出的history API，由pushState()记录操作历史，监听popstate事件来监听到状态变更；
因为 只要刷新 这个url（www.ff.ff/jjkj/fdfd/fdf/fd）就会请求服务器，然而服务器上根本没有这个资源，所以就会报404，解决方案就 配置一下服务器端。
History interface 是浏览器历史记录栈提供的接口，通过back()、forward()、go()等方法，我们可以读取浏览器历史记录栈的信息，进行各种跳转操作。
从 HTML5开始，History interface 提供了2个新的方法：pushState()、replaceState() 使得我们可以对浏览器历史记录栈进行修改：
window.history.pushState(stateObject,title,url)
window.history,replaceState(stateObject,title,url)
stateObject：当浏览器跳转到新的状态时，将触发 Popstate 事件，该事件将携带这个 stateObject 参数的副本
title：所添加记录的标题
url：所添加记录的 url``
这2个方法有个共同的特点：当调用他们修改浏览器历史栈后，虽然当前url改变了，但浏览器不会立即发送请求该url，这就为单页应用前端路由，更新视图但不重新请求页面提供了基础
push
与hash模式类似，只是将window.hash改为history.pushState
replace
与hash模式类似，只是将window.replace改为history.replaceState
监听地址变化
在HTML5History的构造函数中监听popState（window.onpopstate）
说明：
hash: 使用 URL hash 值来作路由。支持所有浏览器，包括不支持 HTML5 History Api 的浏览器；
history : 依赖 HTML5 History API 和服务器配置。具体可以查看 HTML5 History 模式；
abstract : 支持所有 JavaScript 运行环境，如 Node.js 服务器端。如果发现没有浏览器的 API，路由会自动强制进入这个模式.