Vue的两种路由模式

在vue-router路由对象中，路由有两种模式：hash和history，而默认的是hash模式.

hash路由

• onhashchange事件，可以在windows对象上监听这个事件:

windows.onhashchange = function(event){
  console.log(event.oldURL,event.newURL);
let hash = location.hasg  //通过location对象来获取hash地址
console.log(hash)  // #/notebooks/123456/list  地址从#号开始
}

因为hash发生变化的url都会被浏览器记录下来，从而会发现浏览器的前进后退都可以用

history路由

• 随着 history api的到来，前端路由开始进化了，前面的hashchange，你只能改变#后面的url片段，而history api则给了前端完全的自由，history api可以分为两大部分，切换和修改
  切换历史状态
  包括 back,forward,go三个方法，对应浏览器的前进，后退，跳转操作。很多小伙伴只知道浏览器有前进和后退，其实在前进后退上长按鼠标，会弹出历史记录，从而完成跳转.

history.go(-2); //后退两次
history.go(2);//前进两次
history.back();//后退
history.forward();前进

修改历史状态
包括了pushState,replaceState两个方法，这两个方法接受三个参数：stateObj,title,url

history.pushState({color:'red','red','red'})
history.back();

通过pushstate把页面的状态保存在state对象中，当页面的url再变回这个url时，可以通过event.state取到这个state对象.
history 模式的补充
对于vue开发的单页面应用，我们在切换不同的页面的时候，可以发现html永远只有一个，这也真是称之为单页面的原因，而vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。而当开启history模式的时候，如果后端不进行任何处理，在Dev阶段一切都是正常的，可是打包之后，访问路径则会返回404，因此要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是app 依赖的页面。