-
hash模式
-
hash虽然出现在URL中，但不会被包括在HTTP请求中。它是用来指导浏览器动作的，对服务器端完全无用，因此，改变hash不会重新加载页面。
-
可以为hash的改变添加监听事件。
-
每一次改变hash（window.location.hash），都会在浏览器的访问历史中增加一个记录。
-
History接口是浏览器历史记录栈提供的接口，通过back(), forward(), go()等方法，我们可以读取浏览器历史记录栈的信息，进行各种跳转操作。从HTML5开始，History interface提供了两个新的方法：pushState(), replaceState()使得我们可以对浏览器历史记录栈进行修改，所以就可以使用history接口进行前端路由(发生页面跳转但是页面不刷新)。
-
vue-router的作用就是通过改变URL，在不重新请求页面的情况下，更新页面视图。简单的说就是，虽然地址栏的地址改变了，但是并不是一个全新的页面，而是之前的页面某些部分进行了修改。
-
可以看出，两种模式都执行了transitionTo( )函数。
-
可以看到，当路由变化时，调用了History中的this.cb方法，而this.cb方法是通过History.listen(cb)进行设置的。
-
由于_route属性是采用vue的数据劫持，当_route的值改变时，会执行响应的render( )。
-
HashHistory.replace它与push()的实现结构上基本相似，不同点在于它不是直接对window.location.hash进行赋值，而是调用window.location.replace方法将路由进行替换。这样不会将新路由添加到浏览器访问历史的栈顶，而是替换掉当前的路由。
-
该方法设置监听了浏览器事件hashchange，调用的函数为replaceHash，即在浏览器地址栏中直接输入路由相当于代码调用了replace()方法.后面的步骤自然与HashHistory.replace()相同，一样实现页面渲染。
-
History模式的vue-router 代码结构以及更新视图的逻辑与hash模式基本类似，和HashHistory的步骤基本一致，只是HashHistory的push（直接替换hash地址）和replace()(调用window.location.replace方法)变成了HTML5History.pushState()和HTML5History.replaceState()。监听地址栏手动变化都是监听hashchange事件或者popstate事件。
-
hash模式 会在浏览器的URL中加入'#'，而HTM5History就没有'#'号，URL和正常的URL一样。 另外： history.pushState()相比于直接修改hash主要有以下优势：
- pushState设置的新URL可以是与当前URL同源的任意URL；而hash只可修改#后面的部分，故只可设置与当前同文档的URL
- pushState设置的新URL可以与当前URL一模一样，这样也会把记录添加到栈中；而hash设置的新值必须与原来不一样才会触发记录添加到栈中
- pushState通过stateObject可以添加任意类型的数据到记录中；而hash只可添加短字符串
- pushState可额外设置title属性供后续使用
