vue-router中hash模式與history模式的區別

vue-router有兩種模式

• hash模式
• history模式
  

1.單頁(yè)面應用

單頁(yè)應用

1.只有一個(gè)html文件，整個(gè)網(wǎng)站的所有內容都在這一個(gè)html里，通過(guò)js來(lái)處理

2.不僅僅是在頁(yè)面交互是無(wú)刷新的，連頁(yè)面跳轉都是無(wú)刷新的。為了實(shí)現單頁(yè)應用 ==> 前后端分離 + 前端路由。（更新視圖但不重新請求頁(yè)面）

前端路由

實(shí)現起來(lái)其實(shí)也很簡(jiǎn)單，就是匹配不同的 url 路徑，進(jìn)行解析，加載不同的組件，然后動(dòng)態(tài)的渲染出區域 html 內容。

優(yōu)點(diǎn)

良好的交互體驗,用戶(hù)不需要刷新頁(yè)面,頁(yè)面顯示流暢, 良好的前后端工作分離模式,減輕服務(wù)器壓力,

缺點(diǎn)

不利于SEO,初次加載耗時(shí)比較多

2.hash模式

原理：是onhashchange事件,可以在window對象上監聽(tīng)這個(gè)事件

vue-router默認的是hash模式

1.使用URL的hash來(lái)模擬一個(gè)完整的URL

2.當URL改變的時(shí)候,頁(yè)面不會(huì )重新加載,也就是單頁(yè)應用了

2.當#后面的hash發(fā)生變化,不會(huì )導致瀏覽器向服務(wù)器發(fā)出請求,瀏覽器不發(fā)出請求就不會(huì )刷新頁(yè)面,并且會(huì )觸發(fā)hasChange這個(gè)事件,通過(guò)監聽(tīng)hash值的變化來(lái)實(shí)現更新頁(yè)面部分內容的操作

window.onhashchange = function(event){
    console.log(event.oldURL, event.newURL);
    let hash = location.hash.slice(1);
    document.body.style.color = hash;
}

對于hash模式會(huì )創(chuàng )建hashHistory對象,在訪(fǎng)問(wèn)不同的路由的時(shí)候,會(huì )發(fā)生兩件事:

1.HashHistory.push()將新的路由添加到瀏覽器訪(fǎng)問(wèn)的歷史的棧頂,

2.HasHistory.replace()替換到當前棧頂的路由

3.history模式

隨著(zhù)history api的到來(lái)，前端路由開(kāi)始進(jìn)化了,前面的hashchange，你只能改變#后面的url片段，而history api則給了前端完全的自由

• history api可以分為兩大部分：切換和修改
  

3.1 切換歷史狀態(tài)

包括back,forward,go三個(gè)方法
對應瀏覽器的前進(jìn)，后退，跳轉操作
例如：(谷歌)瀏覽器只有前進(jìn)和后退，沒(méi)有跳轉，嗯，在前進(jìn)后退上長(cháng)按鼠標，會(huì )出來(lái)所有當前窗口的歷史記錄，從而可以跳轉(也許叫跳更合適)：

history.go(-2);//后退兩次
history.go(2);//前進(jìn)兩次
history.back(); //后退
hsitory.forward(); //前進(jìn)

3.2 修改歷史狀態(tài)

包括了pushState,replaceState兩個(gè)方法

這兩個(gè)方法接收三個(gè)參數:stateObj,title,url

history.pushState({color:'red'}, 'red', 'red'})

window.onpopstate = function(event){
    console.log(event.state)
    if(event.state && event.state.color === 'red'){
        document.body.style.color = 'red';
    }
}

history.back();

history.forward();

步驟

1.通過(guò)pushstate把頁(yè)面的狀態(tài)保存在state對象中

2.當頁(yè)面的url再變回這個(gè)url時(shí)，可以通過(guò)event.state取到這個(gè)state對象

3.從而可以對頁(yè)面狀態(tài)進(jìn)行還原

4.這里的頁(yè)面狀態(tài)就是頁(yè)面字體顏色，其實(shí)滾動(dòng)條的位置，閱讀進(jìn)度，組件的開(kāi)關(guān)的這些頁(yè)面狀態(tài)都可以存儲到state的里面。

3.3 history模式怕啥

hash 和 history 的區別

history 模式

1.通過(guò)history api，我們丟掉了丑陋的#，但是它也有個(gè)毛病

2.不怕前進(jìn)，不怕后退，就怕刷新，f5

——history模式會(huì )將URL修改得就和正常請求后端的URL一樣,如后端沒(méi)有配置對應/user/id的路由處理，則會(huì )返回404錯誤

——所以這個(gè)實(shí)現需要服務(wù)器的支持，需要把所有路由都重定向到根頁(yè)面。

ash模式下

1.前面的hashchange，你只能改變#后面的url片段。而pushState設置的新URL可以是與當前URL同源的任意URL。

2.前端路由修改的是#中的信息，而瀏覽器請求時(shí)是不帶它玩的，所以沒(méi)有問(wèn)題.但是在history下，你可以自由的修改path，當刷新時(shí)，如果服務(wù)器中沒(méi)有相應的響應或者資源，會(huì )分分鐘刷出一個(gè)404來(lái)。

總結

到此這篇關(guān)于vue-router中hash模式與history模式區別的文章就介紹到這了,更多相關(guān)vue-router模式區別內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！