前言

為了構(gòu)建 SPA（單頁(yè)面應(yīng)用）即不刷新整體頁(yè)面，通過(guò)地址欄中的變化來(lái)實(shí)現(xiàn)單頁(yè)面的切換等功能。

Vue-Router 用了兩種模式來(lái)實(shí)現(xiàn)： hash 模式和 history 模式。 默認(rèn)的路由模式是 hash 模式。

注：hash 模式和 history 模式都屬于瀏覽器自身的特性， Vue-Router只是利用了這兩個(gè)特性

來(lái)實(shí)現(xiàn)前端路由和頁(yè)面的關(guān)聯(lián)。

hash 模式和 history 模式最直觀的區(qū)別就是-----hash路由帶#號(hào)，history路由不帶#號(hào)。

hash模式

hash 模式是開(kāi)發(fā)中默認(rèn)的模式， 它的 URL 帶著一個(gè)#， 例如： http://www.csy.com/#/vue， 它的 hash 值就是#/vue。

特點(diǎn)：

• 當(dāng)URL中的hash值發(fā)生改變時(shí)，瀏覽器不會(huì)向后端發(fā)送http請(qǐng)求；
• 頁(yè)面不會(huì)重新加載

這種模式的瀏覽器支持度很好， 低版本的 IE 瀏覽器也支持這種模式。

hash模式原理

通過(guò)監(jiān)聽(tīng)hashChange事件進(jìn)行頁(yè)面定位，渲染不同的內(nèi)容;

window.onhashchange = function(event){// 點(diǎn)擊游覽器前進(jìn)后退按鈕時(shí)會(huì)觸發(fā)
    console.log(event.oldURL,event.newURL);
    let hash = location.hash.slice(1);
    document.body.style.color = 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)了。

history模式

history 模式的 URL 中沒(méi)有#， 它使用的是傳統(tǒng)的路由分發(fā)模式， 即用戶在輸入一個(gè) URL 時(shí)， 服務(wù)器會(huì)接收這個(gè)請(qǐng)求， 并解析這個(gè)URL， 然后做出相應(yīng)的邏輯處理。

它通過(guò)HTML5 History API 提供的 history.pushState方法或者 history.replaceState 方法，監(jiān)聽(tīng)popstate事件，需要客戶端和服務(wù)端共同的支持。

pushState() 和 replaceState() 方法， 這兩個(gè)方法應(yīng)用于瀏覽器的歷史記錄棧， 提供了對(duì)歷史記錄進(jìn)行修改的功能。 只是當(dāng)他們進(jìn)行修改時(shí)， 雖然修改了 url， 但瀏覽器不會(huì)立即向后端發(fā)送請(qǐng)求。 

切換歷史狀態(tài)： 包括 forward()、 back()、 go()三個(gè)方法， 對(duì)應(yīng)瀏覽器的前進(jìn)， 后退， 跳轉(zhuǎn)操作

注：

• history 模式下刷新頁(yè)面請(qǐng)求后端是時(shí)
• 如果后端沒(méi)有相應(yīng)的路由或資源就會(huì)出現(xiàn)404

此為前端配置

export default new Router({
    mode: 'history',
    // mode: 'hash',  //默認(rèn)hash模式
    routes
})

總結(jié)

1、hash模式帶#號(hào)比較丑，history模式比較優(yōu)雅；

2、pushState設(shè)置的新的URL可以是與當(dāng)前URL同源的任意URL；而hash只可修改#后面的部分，故只可設(shè)置與當(dāng)前同文檔的URL；

3、pushState設(shè)置的新URL可以與當(dāng)前URL一模一樣，這樣也會(huì)把記錄添加到棧中；而hash設(shè)置 的新值必須與原來(lái)不一樣才會(huì)觸發(fā)記錄添加到棧中；

4、pushState通過(guò)stateObject可以添加任意類型的數(shù)據(jù)到記錄中；而hash只可添加短字符串；

5、pushState可額外設(shè)置title屬性供后續(xù)使用；

6、history 模式下刷新頁(yè)面請(qǐng)求后端是時(shí)，如果后端沒(méi)有相應(yīng)的路由或資源就會(huì)出現(xiàn)404。

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論