路由的hash和history模式

你的vue-router怎么实现跳转？hash 和 history

为何vue中有这两种模式

为了构建 SPA（单页面应用），须要引入前端路由系统，这也就是 Vue-Router 存在的意义。前端路由的核心，就在于 —— 改变视图的同时不会向后端发出请求。 为了达到这种目的，浏览器当前提供了如下两种支持：

1. hash——即地址栏 URL 中的 # 符号（此 hash 不是密码学里的散列运算）。 好比这个 URL：http://www.abc.com/#/hello，hash 的值为 #/hello。它的特色在于：hash 虽然出如今 URL 中，但不会被包括在 HTTP 请求中，对后端彻底没有影响，所以改变 hash 不会从新加载页面。
2. history —— 利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。（须要特定浏览器支持） 这两个方法应用于浏览器的历史记录栈，在当前已有的 back、forward、go 的基础之上，它们提供了对历史记录进行修改的功能。只是当它们执行修改时，虽然改变了当前的 URL，但浏览器不会当即向后端发送请求。

404错误

1. hash模式下，仅hash符号以前的内容会被包含在请求中，如http://www.abc.com，所以对于后端来讲，即便没有作到对路由的全覆盖，也不会返回404错误；
2. history模式下，前端的url必须和后端发起请求的url一致，例如http://www.abc.com/boo/id，若是后端缺乏对book/id的路由处理，就会返回404错误。

hash

hash模式的背后是onhashchange事件，能够在window对象上监听这个事件：

window.onhashchange = function(event){
  console.log(event.oldURL, event.newURL);
  let hash = location.hash.slice(1);
  document.body.style.color = hash;
}
复制代码

这段能够在hash改变的时候改变字体颜色。
hash发生变化的url都会被浏览器记录下来，从而你会发现浏览器的前进后退均可以使用了，同时点击后退时，页面字体颜色也会发生变化。
这样一来虽然没有向后端发送请求，可是页面状态和url关联在了一块儿，这就是前端路由。 网易云和百度网盘就是典型的使用hash的网页。

history

history包括go(),forward(),back()方法。

history.go(-2);
history.go(2);//前进两次
history.back();
history.forward();
复制代码

修改历史状态，包括了pushState()和replaceState()两种方法，这两个方法接收三个参数，stateObj,title,url。

history.pushState({color:'red'}, 'red', 'red'})
window.onpopstate = function(event){
  console.log(event.state)
  if(event.state && event.state.color === 'red'){
    document.body.style.color = 'red';
  }
}
history.back();
history.forward();
复制代码

经过pushState方法把页面状态保存在state对象中，当页面的url再变回这个url时，能够经过event.state取到这个state对象，从而能够对页面状态进行还原，主要是滚动条的位置，阅读进度，组建的开关等等。

history模式不怕前进不怕后退怕刷新，f5。
刷新是实实在在的去请求后端了。
在hash模式下，前端路由修改的是#中的信息，而浏览器请求是不带他的，因此没有问题。可是在history模式下你能够自由的修改path，当刷新时若是没有相应的的响应或者资源，会分分钟刷新一个404出来。