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