前言

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

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

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

來實現(xiàn)前端路由和頁面的關(guān)聯(lián)。

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

hash模式

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

特點：

• 當URL中的hash值發(fā)生改變時，瀏覽器不會向后端發(fā)送http請求；
• 頁面不會重新加載

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

hash模式原理

通過監(jiān)聽hashChange事件進行頁面定位，渲染不同的內(nèi)容;

window.onhashchange = function(event){// 點擊游覽器前進后退按鈕時會觸發(fā)
    console.log(event.oldURL,event.newURL);
    let hash = location.hash.slice(1);
    document.body.style.color = hash;
}

使用 onhashchange()事件的好處就是， 在頁面的 hash 值發(fā)生變化時，無需向后端發(fā)起請求， window 就可以監(jiān)聽事件的改變， 并按規(guī)則加載相應(yīng)的代碼。

除此之外， hash 值變化對應(yīng)的 URL 都會被瀏覽器記錄下來， 這樣瀏覽器就能實現(xiàn)頁面的前進和后退。

雖然是沒有請求后端服務(wù)器， 但是頁面的 hash 值和對應(yīng)的 URL 關(guān)聯(lián)起來了。

history模式

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

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

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

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

注：

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

此為前端配置

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

總結(jié)

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

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

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

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

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

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

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

最新評論