描述下vue router的工作原理

vue-router通過hash與history inte***ce兩種方式實現前端路由，更新檢視但不重新請求頁面」是前端路由原理的核心之一，目前在瀏覽器環境中這一功能的實現主要有兩種方式:

hash:利用url中的hash（「#」） history:利用history inte***ce在 html5中新增的方法

那麼，我們要選擇用哪種方式呢？

在vue-router中，它提供mode引數來決定採用哪一種方式，選擇流程如下:

mode 引數：

預設hash 也可選擇history 注：如果瀏覽器不支援history新特性,則採用hash方式

如果不在瀏覽器環境則使用abstract（node環境下）

router/index.js 檔案**

import vue from
'vue'
import router from
'vue-router'
import routes from
'./routes'
vue.
use(router)
export
default
newrouter
()

那麼，經過測試，有什麼區別呢？

mode: 'hash' ，多了「 # 」

history api可以分為兩大部分，切換和修改，參考mdn

切換歷史狀態

包括back,forward,go三個方法，對應瀏覽器的前進，後退，跳轉操作，有同學說了，(谷歌)瀏覽器只有前進和後退，沒有跳轉，嗯，在前進後退上長按滑鼠，會出來所有當前視窗的歷史記錄，從而可以跳**

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

修改歷史狀態包括了pushstate,replacestate兩個方法,這兩個方法接收三個引數:stateobj,title,url

history.
pushstate(,
'red'
,'red'})
window.
onpopstate
=function
(event)
}history.
back()
;history.
forward()
;

通過pushstate把頁面的狀態儲存在state物件中，當頁面的url再變回這個url時，可以通過event.state取到這個state物件，從而可以對頁面狀態進行還原，這裡的頁面狀態就是頁面字型顏色，其實滾動條的位置，閱讀進度，元件的開關的這些頁面狀態都可以儲存到state的裡面。

history模式怕啥

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

不怕前進，不怕後退，就怕重新整理，f5，（如果後端沒有準備的話）,因為重新整理是實實在在地去請求伺服器的,不玩虛的。

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

所以，如果你想在github.io上搭乙個單頁部落格，就應該選擇hash模式。