Vue-Router 有兩種模式：hash 模式和 history 模式塑径。默認(rèn)的路由模式是 hash 模式。
1. hash 模式
1.1 簡介
hash 模式是開發(fā)中默認(rèn)的模式，它的 URL 帶著一個#;
例如：http://www.abc.com/#/vue氨鹏，它的 hash 值就是#/vue注竿。
1.2 特點(diǎn)
- hash 值會出現(xiàn)在 URL 里面，但是不會出現(xiàn)在 HTTP 請求中康嘉，對后端完全沒有影響碉输。所以改變 hash 值，不會重新加載頁面亭珍。
- 這種模式的瀏覽器支持度很好敷钾，低版本的 IE 瀏覽器也支持這種模式枝哄。
- hash路由被稱為是前端路由，已經(jīng)成為 SPA（單頁面應(yīng)用）的標(biāo)配阻荒。
1.3 原理Ｄ幼丁！侨赡！
hash 模式的主要原理就是 onhashchange() 事件
好處：
在頁面的 hash 值發(fā)生變化時瘪贱，無需向后端發(fā)起請求，window 就可以監(jiān)聽事件的改變辆毡，并按規(guī)則加載相應(yīng)的代碼
hash 值變化對應(yīng)的 URL 都會被瀏覽器記錄下來菜秦，這樣瀏覽器就能實(shí)現(xiàn)頁面的前進(jìn)和后退
雖然是沒有請求后端服務(wù)器，但是頁面的 hash 值和對應(yīng)的 URL 關(guān)聯(lián)起來了舶掖。
// js中有一個事件hashchange
window.onhashchange = function() {
// 可以獲取到app的data值球昨，也可以設(shè)置值
// console.log(app.currentCom)
// 獲取錨點(diǎn)值
let curhash = location.hash.slice(1)
console.log(curhash)
switch (curhash) {
case '/login':
app.currentCom = 'login'
break
case '/reg':
app.currentCom = 'reg'
break
case '/index':
app.currentCom = 'index'
break
}
}
2. history 模式
2.1 簡介
history 模式的 URL 中沒有#，它使用的是傳統(tǒng)的路由分發(fā)模式眨攘，即用戶在輸入一個 URL 時主慰，服務(wù)器會接收這個請求，并解析這個URL鲫售，然后做出相應(yīng)的邏輯處理共螺。
2.2 特點(diǎn)
當(dāng) 使 用 history 模 式 時 ， URL 就 像 這 樣 ：http://abc.com/user/id情竹。相比 hash 模式更加好看藐不。
history模式需要后臺配置支持，如果后臺沒有正確配置秦效，訪問時會返回 404雏蛮。
-
API： history api 可以分為兩大部分，切換歷史狀態(tài)和修改歷史狀態(tài)：
修 改 歷 史 狀 態(tài) ：
包 括 了 HTML5 History Interface 中 新 增 的
pushState()和replaceState()方法阱州，這兩個方法應(yīng)用于瀏覽器的歷史記錄棧挑秉，提供了對歷史記錄進(jìn)行修改的功能。只是當(dāng)他們進(jìn)行修改時苔货，雖然修改了 url犀概，但瀏覽器不會立即向后端發(fā)送請求。如果要做到改變 url 但又不刷新頁面的效果夜惭，就需要前端用上這兩個 API姻灶。切換歷史狀態(tài)：
包括
forward()、back()滥嘴、go()三個方法木蹬，對應(yīng)瀏覽器的前進(jìn)，后退若皱，跳轉(zhuǎn)操作镊叁。雖然 history 模式丟棄了丑陋的#。但是走触，它也有自己的缺點(diǎn)晦譬，就是在刷新頁面的時候，如果沒有相應(yīng)的路由或資源互广，就會刷出 404 來敛腌。
-
如果想要切換到 history 模式，就要進(jìn)行以下配置（后端也要進(jìn)行配置）
const router = new VueRouter({ mode:'history', routes:[...] })
3. 兩種模式對比
- 調(diào)用 history.pushState() 相比于直接修改 hash惫皱，存在以下優(yōu)勢：pushState() 設(shè)置的新 URL 可以是與當(dāng)前 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ù)使用晴音。
- hash 模式下柔纵，僅 hash 符號之前的 url 會被包含在請求中，后端如果沒有做到對路由的全覆蓋锤躁，也不會返回 404 錯誤搁料；
- history 模式下，前端的 url 必須和實(shí)際向后端發(fā)起請求的 url 一致系羞，如果沒有對用的路由處理加缘，將返回 404 錯誤。
- hash 模式和 history 模式都有各自的優(yōu)勢和缺陷觉啊，還是要根據(jù)實(shí)際情況選擇性的使用拣宏。
