hash路由模式是这样的：http://xxx.abc.com/#/xx。 有带#号，后面就是hash值的变化。**改变后面的hash值，它不会向服务器发出请求，因此也就不会刷新页面。**并且每次hash值发生改变的时候，会触发hashchange事件。因此我们可以通过监听该事件，来知道hash值发生了哪些变化。

function hashAndUpdate () {
   // todo 匹配 hash 做 dom 更新操作
}
window.addEventListener('hashchange', hashAndUpdate);

修改hash值会触发hashchange方法，并且不会刷新页面。
可以把hash理解成当前页面的一个位置。

HTML5的History API为浏览器的全局history对象增加了该扩展方法。它是一个浏览器的一个接口，在window对象中提供了onpopstate事件来监听历史栈的改变，只要历史栈有信息发生改变的话，就会触发该事件。提供了如下事件：

注意：执行后两种方法后，url地址会发生改变。但是不会刷新页面。

window.addEventListener('popstate', function(e) {
  console.log(e)
});

相同点：

• 不管我们是通过location接口直接改变hash值，还是我们通过history直接前进或后退操作(改变hash变化)，都不会刷新页面。
• 改变hash或history时都可以触发hashchange事件或者popstate事件

不同点：

• hash改变时其#后面的值不会传给后端。而history会修改当前页面的url。
• pushState设置的新URL可以是与当前URL同源的任意URL；而hash只可修改#后面的部分，故只可设置与当前同文档的URL
• pushState通过stateObject可以添加任意类型的数据到记录中；而hash只可添加短字符串。
• pushState可额外设置title属性供后续使用。
• history模式则会将URL修改得就和正常请求后端的URL一样,如后端没有配置对应/user/id的路由处理，则会返回404错误

1. $router.push()

1 $router.push() //调用方法

2 HashHistory.push() 
//根据hash模式调用,设置hash并添加到浏览器历史记录（添加到栈顶）
（window.location.hash= XXX）

3 History.transitionTo() 
//监测更新，更新则调用History.updateRoute()

4 History.updateRoute() 
//更新路由

5 {app._route= route} 
//替换当前app路由

6 vm.render() 
//更新视图

2. $router.replace()
   与push不同之处主要在于第二步调用的是window.location.replace方法