前端路由模式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錯誤