大家都知道vue是一种单页应用，单页应用就是仅在页面初始化的时候加载响应的html/css/js，单页面加载而成，不会因为用户的操作而进行页面的重新加载或者跳转，用js动态的变化html内容

优点：良好的交互体验，用户不需要刷新页面，页面显示流畅，良好的前后端工作分离模式，减轻服务器压力

缺点：不利于SEO，初次加载耗时比较多

 

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();前进

 history怕啥？

通过history api，我们丢掉了丑陋的#，但是他有个毛病

不怕前进，不怕后退，就怕刷新，f5,（如果后端没有准备的话），因为刷新是实实在在地去请求服务器的，不玩虚的。

在hash模式下，前端理由修改的是#中的信息，跟浏览器请假没任何问题，但是history下，你可以自由修改path，当刷新时，如果服务器中没有响应的响应或者资源，分分钟刷出个404来。