轉原文鏈接：https://blog.51cto.com/u_15127544/2699725
本次從瀏覽器底層來討論hash和history兩種路由模式的區(qū)別，首先介紹一下這兩種路由模式：
1.hash——即地址欄URL中的#符號（此hash不是密碼學里的散列運算）。比如在 http://localhost:8080/#/donate 中惨奕，hash的值就是#/donate,我們在瀏覽器中可以通過BOM中的變量獲取到
image.png
圖中可以通過window.location.hash來獲取當前URL的hash值椭蹄。
2.history——history模式即是通過在host之后茴迁，直接添加斜線和路徑來請求后端的一種URL模式执泰。我們把demo中的vue-router調整到了history模式唧躲，獲取window.location如下圖：
image.png
圖中pathname變量為/donate咙好，而hash值為空篡腌。
上面簡要介紹了一下hash和history模式，下面來著重講解一下這兩者的區(qū)別：
1.是否向后端傳參：
在hash模式中勾效，我們刷新一下上面的網頁嘹悼，可以看到請求的URL為http://localhost:8080/，沒有帶上#/donate层宫，說明在hash模式下杨伙，#后面的內容是不會包含在請求中的，只是會被前端瀏覽器利用：
image.png
在history模式中萌腿，刷新一下網頁限匣，明顯可以看到請求url為完整的url，url完整地請求了后端：
image.png
2.是否刷新頁面
調整到hash模式毁菱，在頁面中通過 window.location.hash = '#/trans' 做了一個hash的跳轉米死，我們可以看到瀏覽器的Network中沒有進行新的請求锌历，也就是說修改了hash參數(shù)，前端瀏覽器不會重新請求后端峦筒，只是會對前端自己的路由生效究西。
在history模式中，頁面中通過 window.location.pathname = '/trans' 做一個路由跳轉物喷÷辈模可以看到，在對pathname重新賦值后峦失，頁面產生了新的請求trans扇丛。說明在history模式下，通過修改pathname直接修改路由尉辑，瀏覽器是會重新產生一個新的請求的帆精。
image.png
