vue-router的hash 模式和 history 模式

vue-router的hash 模式和 history 模式

url 中带有#的便是 hash 模式,#后面是 hash 值,它的变化会触发 hashchange 这个事件。

通过这个事件我们就可以知道 hash 值发生了哪些变化。然后我们便可以监听 hashchange 来实现更新页面部分内容的操作:

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

另外,hash 值的变化,并不会导致浏览器向服务器发出请求,浏览器不发出请求,也就不会刷新页面。

history 模式

history api 可以分为两大部分,切换和修改

① 切换历史状态

包括 back,forward,go 三个方法,对应浏览器的前进,后退,跳转操作

history.go(-2);//后退两次
history.go(2);//前进两次
history.back(); //后退
hsitory.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 对象,从而可以对页面状态进行还原,这里的页面状态就是页面字体颜色,其实滚动条的位置,阅读进度,组件的开关的这些页面状态都可以存储到 state 的里面。

 

1:hash 模式下,仅 hash 符号之前的内容会被包含在请求中,如http://www.abc.com,因此对于后端来说,即使没有做到对路由的全覆盖,也不会返回 404 错误。

2:history 模式下,前端的 URL 必须和实际向后端发起请求的 URL 一致。如http://www.abc.com/book/a。如果后端缺少对/book/a 的路由处理,将返回 404 错误