开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第31天，点击查看活动详情”

前言

vue是SPA(单页面渲染)应用，页面之间的跳转是通过vue-router路由实现的，vue-router有两种模式，今天我们一起来学习下。

hash

hash模式vue-router的默认值模式，它的特点是url上面有一个#，#号后面的字符被称为锚，用于定位跳转的。当我们改变hash值时，不需要向后端请求接口，页面不会重新加载。它对于浏览器的兼容性比较好，ie浏览器不用专门去做对应的兼容处理。

原理

hash模式主要是通过onhashchange事件实现的，window会监听hash值的变化，当页面hash值改变，监听到变化，window会将对应页面渲染起来。onhashchange事件如下：

    window.onhashchange = function(e){
      console.log(e.oldURL,e.newURL)
    }

hash值的变化也会被记录，前进后退也能关联起来。最后我们看下触发hashchange的情况：

• 前进后退及hash值变化。
• 在url地址栏手动修改hash值。
• 通过a标签进行锚点定位。

history

history历史模式，在url上面并没有#，当用户请求页面时，会向后端发送请求，解析url然后记载出页面。history需要后端进行路由相关的配置，如果没有配置好就会返回404。

原理

history有两个属性：

• length:访问过的网址数。
• state:记录最上层的状态。
  因为有state状态跟历史记录，所以history通过pushState与replaceState方法去进行路由跳转。
• pushState:添加一条记录到历史中。
• replacestate:修改当前记录。 这两个方法都不会向后端发送请求，所以在项目中跳转路由时也不会重新加载页面。除了以上两种方法还有一个方法：
• popstate:切换历史状态时触发，当点击浏览器前进、后退时触发，还有就是在js中调用相关方法：
  

      后退——history.back()
      前进——history.forward()
      跳转——history.go()

总结

vue-router的两种模式，hash通过修改hash值实现跳转，但url必须是同文档下的;history通过修改state状态实现跳转，能够设置同源下的url，还能设置title属性，但是需要后端配合否则会404。