hash前端路由弄砍，無刷新
history 會去請求接口
vue-router提供兩種模式的原因：
vue 是漸進(jìn)式前端開發(fā)框架扼劈，為了實現(xiàn) SPA ，需要引入前端路由系統(tǒng)（vue-router）矿卑。前端路由的核心是：改變視圖的同時不會向后端發(fā)出請求窝剖。
為了達(dá)到這一目的，瀏覽器提供了 hash 和 history 兩種模式梭域。
- hash ：hash 雖然出現(xiàn)在 URL 中，但不會被包含在 http 請求中搅轿，對后端完全沒有影響病涨，因此改變 hash 不會重新加載頁面。
- history ：history 利用了 html5 history interface 中新增的 pushState() 和 replaceState() 方法璧坟。這兩個方法應(yīng)用于瀏覽器記錄棧既穆，在當(dāng)前已有的 back、forward雀鹃、go 基礎(chǔ)之上幻工，它們提供了對歷史記錄修改的功能。只是當(dāng)它們執(zhí)行修改時黎茎，雖然改變了當(dāng)前的 URL 囊颅，但瀏覽器不會立即向后端發(fā)送請求。
因此可以說傅瞻， hash 模式和 history 模式都屬于瀏覽器自身的屬性踢代，vue-router 只是利用了這兩個特性（通過調(diào)用瀏覽器提供的接口）來實現(xiàn)路由。
實現(xiàn)的原理：
- hash 模式的原理是 onhashchange 事件嗅骄，可以在 window 對象上監(jiān)聽這個事件胳挎。
- history ：hashchange 只能改變 # 后面的代碼片段，history api （pushState溺森、replaceState慕爬、go窑眯、back、forward） 則給了前端完全的自由医窿，通過在window對象上監(jiān)聽popState()事件磅甩。
pushState()、replaceState() 方法接收三個參數(shù)：stateObj留搔、title更胖、url。
// 設(shè)置狀態(tài)
history.pushState({color: "red"}, "red", "red");
// 監(jiān)聽狀態(tài)
window.onpopstate = function(event){
console.log(event.state);
if(event.state && event.state.color === "red"){
document.body.style.color = "red";
}
}
// 改變狀態(tài)
history.back();
history.forward();復(fù)制代碼
應(yīng)用場景：
通過 pushState 把頁面的狀態(tài)保存在 state 對象中隔显，當(dāng)頁面的 url 再變回到這個 url 時却妨，可以通過 event.state 取到這個 state 對象，從而可以對頁面狀態(tài)進(jìn)行還原括眠，如頁面滾動條的位置彪标、閱讀進(jìn)度、組件的開關(guān)等掷豺。
調(diào)用 history.pushState() 比使用 hash 存在的優(yōu)勢：
- pushState 設(shè)置的 url 可以是同源下的任意 url 捞烟；而 hash 只能修改 # 后面的部分，因此只能設(shè)置當(dāng)前 url 同文檔的 url
- pushState 設(shè)置的新的 url 可以與當(dāng)前 url 一樣当船，這樣也會把記錄添加到棧中题画；hash 設(shè)置的新值不能與原來的一樣，一樣的值不會觸發(fā)動作將記錄添加到棧中
- pushState 通過 stateObject 參數(shù)可以將任何數(shù)據(jù)類型添加到記錄中德频；hash 只能添加短字符串
- pushState 可以設(shè)置額外的 title 屬性供后續(xù)使用
劣勢：
- history 在刷新頁面時苍息，如果服務(wù)器中沒有相應(yīng)的響應(yīng)或資源，就會出現(xiàn)404壹置。因此竞思，如果 URL 匹配不到任何靜態(tài)資源，則應(yīng)該返回同一個 index.html 頁面钞护，這個頁面就是你 app 依賴的頁面
- hash 模式下盖喷，僅 # 之前的內(nèi)容包含在 http 請求中，對后端來說难咕，即使沒有對路由做到全面覆蓋课梳，也不會報 404
參考：https://blog.csdn.net/majunjie2017/article/details/78507551
