为什么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出来。