Vue-Router 有兩種模式：hash 模式和 history 模式。默認(rèn)的路由模式是 hash 模式。
1. hash 模式
1.1 簡(jiǎn)介
hash 模式是開(kāi)發(fā)中默認(rèn)的模式，它的 URL 帶著一個(gè)#;
例如：http://www.abc.com/#/vue，它的 hash 值就是#/vue。
1.2 特點(diǎn)
- hash 值會(huì)出現(xiàn)在 URL 里面，但是不會(huì)出現(xiàn)在 HTTP 請(qǐng)求中，對(duì)后端完全沒(méi)有影響。所以改變 hash 值，不會(huì)重新加載頁(yè)面。
- 這種模式的瀏覽器支持度很好，低版本的 IE 瀏覽器也支持這種模式。
- hash路由被稱為是前端路由，已經(jīng)成為 SPA（單頁(yè)面應(yīng)用）的標(biāo)配。
1.3 原理?。?！
hash 模式的主要原理就是 onhashchange() 事件
好處：
在頁(yè)面的 hash 值發(fā)生變化時(shí)，無(wú)需向后端發(fā)起請(qǐng)求，window 就可以監(jiān)聽(tīng)事件的改變，并按規(guī)則加載相應(yīng)的代碼
hash 值變化對(duì)應(yīng)的 URL 都會(huì)被瀏覽器記錄下來(lái)，這樣瀏覽器就能實(shí)現(xiàn)頁(yè)面的前進(jìn)和后退
雖然是沒(méi)有請(qǐng)求后端服務(wù)器，但是頁(yè)面的 hash 值和對(duì)應(yīng)的 URL 關(guān)聯(lián)起來(lái)了。
// js中有一個(gè)事件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 簡(jiǎn)介
history 模式的 URL 中沒(méi)有#，它使用的是傳統(tǒng)的路由分發(fā)模式，即用戶在輸入一個(gè) URL 時(shí)，服務(wù)器會(huì)接收這個(gè)請(qǐng)求，并解析這個(gè)URL，然后做出相應(yīng)的邏輯處理。
2.2 特點(diǎn)
當(dāng) 使 用 history 模 式 時(shí) ， URL 就 像 這 樣 ：http://abc.com/user/id。相比 hash 模式更加好看。
history模式需要后臺(tái)配置支持，如果后臺(tái)沒(méi)有正確配置，訪問(wèn)時(shí)會(huì)返回 404。
-
API： history api 可以分為兩大部分，切換歷史狀態(tài)和修改歷史狀態(tài)：
修 改 歷 史 狀 態(tài) ：
包 括 了 HTML5 History Interface 中 新 增 的
pushState()和replaceState()方法，這兩個(gè)方法應(yīng)用于瀏覽器的歷史記錄棧，提供了對(duì)歷史記錄進(jìn)行修改的功能。只是當(dāng)他們進(jìn)行修改時(shí)，雖然修改了 url，但瀏覽器不會(huì)立即向后端發(fā)送請(qǐng)求。如果要做到改變 url 但又不刷新頁(yè)面的效果，就需要前端用上這兩個(gè) API。切換歷史狀態(tài)：
包括
forward()、back()、go()三個(gè)方法，對(duì)應(yīng)瀏覽器的前進(jìn)，后退，跳轉(zhuǎn)操作。雖然 history 模式丟棄了丑陋的#。但是，它也有自己的缺點(diǎn)，就是在刷新頁(yè)面的時(shí)候，如果沒(méi)有相應(yīng)的路由或資源，就會(huì)刷出 404 來(lái)。
-
如果想要切換到 history 模式，就要進(jìn)行以下配置（后端也要進(jìn)行配置）
const router = new VueRouter({ mode:'history', routes:[...] })
3. 兩種模式對(duì)比
- 調(diào)用 history.pushState() 相比于直接修改 hash，存在以下優(yōu)勢(shì)：pushState() 設(shè)置的新 URL 可以是與當(dāng)前 URL 同源的任意 URL；而hash 只可修改 # 后面的部分，因此只能設(shè)置與當(dāng)前 URL 同文檔的URL；
- pushState() 設(shè)置的新 URL 可以與當(dāng)前 URL 一模一樣，這樣也會(huì)把記錄添加到棧中；而 hash 設(shè)置的新值必須與原來(lái)不一樣才會(huì)觸發(fā)動(dòng)作將記錄添加到棧中；
- pushState() 通過(guò) stateObject 參數(shù)可以添加任意類型的數(shù)據(jù)到記錄中；而 hash 只可添加短字符串；
- pushState() 可額外設(shè)置 title 屬性供后續(xù)使用。
- hash 模式下，僅 hash 符號(hào)之前的 url 會(huì)被包含在請(qǐng)求中，后端如果沒(méi)有做到對(duì)路由的全覆蓋，也不會(huì)返回 404 錯(cuò)誤；
- history 模式下，前端的 url 必須和實(shí)際向后端發(fā)起請(qǐng)求的 url 一致，如果沒(méi)有對(duì)用的路由處理，將返回 404 錯(cuò)誤。
- hash 模式和 history 模式都有各自的優(yōu)勢(shì)和缺陷，還是要根據(jù)實(shí)際情況選擇性的使用。
