前端路由模式hash和history

1. hash模式
   hash模式的原理是依据window对象的onhashchange事件进行监听，它的特色是：虽然hash路径出如今URL中，可是不会出如今HTTP请求中，对后端彻底没有影响，所以改变hash值不会从新加载页面。
   

   window.onhashchange = function(e){
         console.log(e);
   }

   打印出来的结果
   
   能够经过location.hash得到浏览器url路径中的#部份内容，上图是#bvc,
   若是想获取#后面的内容可经过location.hash.slice(1),上图是bvc

2. history模式
   利用了HTML5 History Interface中新增的pushState()和replaceState()方法，这两个方法应用于浏览器的历史记录栈，在当前已有的back、forward、go的基础上，他们提供了对当前浏览器进行修改的功能，只是当它们被修改时，虽然浏览器的URL发生
   了变化，可是不会当即向后端服务器发送请求，可是若是点击刷新，就会从新向后端服务器发送请求。
3. 使用场景
   通常状况下，vue-router前端路由模式使用history和hash均可以，在美观上history比hash美观些，由于hash有本身的特定符号#
   相比于hash,history具备如下优点：
   *pushState()设置新的URL能够是任意与当前URL同源的URL，而hash只能改变#后面的内容，所以只能设置与当前URL同文档的URL
   *pushState()设置的URL与当前URL如出一辙时也会被添加到历史记录栈中，而hash模式中，#后面的内容必须被修改才会被添加到新的记录栈中
   *pushState()能够经过stateObject参数添加任意类型的数据到记录中，而hash只能添加短字符串
   *pushState()可额外设置title属性供后续使用
   可是经过URL向后端发起HTTP请求的时候，history，hash具备如下区别：*hash模式下，只有#符号以前的内容才会包含在请求中被发送到后端，也就是说虽而后端没有对路由全覆盖，可是不会返回404错误*history模式下，前端的URL必须和向发送请求后端URL保持一致，不然会报404错误