vue-router的两种模式的区别

古城微笑少年丶 2022-12-15 14:20 138阅读 0赞

大家都知道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来。