vue-router有兩種模式

• hash模式
• history模式
  

1.單頁面應用

單頁應用

1.只有一個html檔案，整個網站的所有內容都在這一個html裡，通過js來處理

2.不僅僅是在頁面互動是無重新整理的，連頁面跳轉都是無重新整理的。為了實現單頁應用 ==> 前後端分離 + 前端路由。（更新檢視但不重新請求頁面）

前端路由

實現起來其實也很簡單程式設計客棧，就是匹配不同的 url 路徑，進行解析，載入不同的元件，然後動態的渲染出區域 html 內容。

優點

良好的互動體驗,使用者不需要重新整理頁面,頁面顯示流暢,良好的前後端工作分離模式,減輕伺服器壓力,

缺點

不利於SEO,初次載入耗時比較多

2.hash模式

原理：是onhashchange事件,可以在window物件上監聽這個事件

vue-router預設的是hash模式

1.使用URL的hash來模擬一個完整的URL

2.當URL改變的時候,頁面不會重新載入,也就是單頁應用了

2.當#後面的hash發生變化,不會導致瀏覽器向伺服器發出請求,瀏覽器不發出請求就不會重新整理頁面,並且會觸發hasChange這個事件,通過監聽hash值的變化來實現更新頁面部分內容的操作

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

對於hash模式會建立hashHistory物件,在訪問不同的路由的時候,會發生兩件事:

1.HashHistory.push()將新的路由新增到瀏覽器訪問的歷史的棧頂,

2.HasHistory.replace()替換到當前棧http://www.cppcns.com頂的路由

3.history模式

隨著history api的到來，前端路由開始進化了,前面的hashchange，你只能改變#後面的url片段，而history api則給了前端完全的自由

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

3.1 切換歷史狀態

包括back,forward,go三個方法

history.go(-2);//後退兩次
history.go(2);//前進兩次
history.back(); //後退
hsitory.forward(); //前進

3.2 修改歷史狀態

包括了pushState,replaceState兩個方法

這兩個方法接收三個引數: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.通過pushstate把頁面的狀態儲存在state物件中

2.當頁面的url再變回這個url時，可以通過event.state取到這個state物件

3.從而可以對頁面狀態進行還原

4.這裡的頁面狀態就是頁TNwrudSBm面程式設計客棧字型顏色，其實滾動條的位置，閱讀進度，元件的開關的這些頁面狀態都可以儲存到state的裡面。

3.3 history模式怕啥

hash 和 history 的區別

history 模式

1.通過history api，我們丟掉了醜陋的#，但是它也有個毛病

2.不怕前進，不怕後退，就怕重新整理，f5

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

——所以這個實現需要伺服器的支援，需要把所有路由都重定向到根頁面。

ash模式下

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

2.前端路由修改的是#中的資訊，而瀏覽器請求時是不帶它玩的，所以沒有問題.但是在history下，你可以自由的修改path，當重新整理時，如果伺服器中沒有相應的響應或者資源，會分分鐘刷出一個404來。

總結

到此這篇關於vue-router中hash模式與history模式區別的文章就介紹到這了,更多相關vue-router模式區別內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！