hash模式url里面永遠(yuǎn)帶著#號瓶佳，我們在開發(fā)當(dāng)中默認(rèn)使用這個(gè)模式侧戴。那么什么時(shí)候要用history模式呢估盘？如果用戶考慮url的規(guī)范那么就需要使用history模式车柠，因?yàn)閔istory模式?jīng)]有#號剔氏，是個(gè)正常的url適合推廣宣傳。當(dāng)然其功能也有區(qū)別竹祷，比如我們在開發(fā)app的時(shí)候有分享頁面谈跛，那么這個(gè)分享出去的頁面就是用vue或是react做的，咱們把這個(gè)頁面分享到第三方的app里塑陵，有的app里面url是不允許帶有#號的感憾，所以要將#號去除那么就要使用history模式，但是使用history模式還有一個(gè)問題就是令花，在訪問二級頁面的時(shí)候阻桅，做刷新操作凉倚，會(huì)出現(xiàn)404錯(cuò)誤，那么就需要和后端人配合讓他配置一下apache或是nginx的url重定向嫂沉，重定向到你的首頁路由上稽寒。
hash模式
我們先來認(rèn)識下這位朋友#，這個(gè)#就是hash符號趟章，中文名哈希符或錨點(diǎn)杏糙，當(dāng)然這在我們前端領(lǐng)域姑且這么稱呼。
然后哈希符后面的值尤揣，我們稱之為哈希值搔啊。OK，接下來我們繼續(xù)分析他的原理北戏。路由的哈希模式其實(shí)是利用了window可以監(jiān)聽onhashchange事件，也就是說你的url中的哈希值（#后面的值）如果有變化漫蛔，前端是可以做到監(jiān)聽并做一些響應(yīng)（搞點(diǎn)事情）嗜愈，這么一來，即使前端并沒有發(fā)起http請求他也能夠找到對應(yīng)頁面的代碼塊進(jìn)行按需加載莽龟。
后來人們給他起了一個(gè)霸氣的名字叫前端路由蠕嫁，成為了單頁應(yīng)用標(biāo)配。
大伙可以圍觀下網(wǎng)易云音樂的url模式：https://music.163.com/#/friend
history模式
我們先介紹一下H5新推出的兩個(gè)神器：pushState與replaceState
具體自行百度毯盈，簡而言之剃毒，這兩個(gè)神器的作用就是可以將url替換并且不刷新頁面，好比掛羊頭賣狗肉搂赋，http并沒有去請求服務(wù)器該路徑下的資源赘阀，一旦刷新就會(huì)暴露這個(gè)實(shí)際不存在的“羊頭”，顯示404脑奠。
那么如何去解決history模式下刷新報(bào)404的弊端呢基公，這就需要服務(wù)器端做點(diǎn)手腳，將不存在的路徑請求重定向到入口文件（index.html）宋欺，前后端聯(lián)手轰豆，齊心協(xié)力做好“掛羊頭賣狗肉”的完美特效。
總之齿诞，pushState方法不會(huì)觸發(fā)頁面刷新酸休，只是導(dǎo)致history對象發(fā)生變化，地址欄會(huì)有反應(yīng)祷杈。
總結(jié)
傳統(tǒng)的路由指的是：當(dāng)用戶訪問一個(gè)url時(shí)斑司，對應(yīng)的服務(wù)器會(huì)接收這個(gè)請求，然后解析url中的路徑吠式，從而執(zhí)行對應(yīng)的處理邏輯陡厘。這樣就完成了一次路由分發(fā)抽米。
而前端路由是不涉及服務(wù)器的，是前端利用hash或者HTML5的history API來實(shí)現(xiàn)的糙置，一般用于不同內(nèi)容的展示和切換云茸。
history模式下，build之后本地 index.html 打開是無效的谤饭。
hash模式下标捺，build之后本地 index.html 打開正常！
