[vue-router] hash模式與history模式的區別

前端路由

使用Vue+vue-router建立單頁應用十分簡單, vue-router提供的功能是將組件映射到路由, 而後渲染出來. 因此vue-router須要知足兩個需求

1. 記錄當前頁面的狀態
2. 可使用瀏覽器的前進後退功能

而vue-router爲了知足以上兩個需求實現如下三個功能

1. 改變URL且不讓瀏覽器向服務器發出請求
2. 檢測URL的改變
3. 截獲URL地址, 並解析出須要的信息來匹配路由規則

hash模式的特色

hash表示的是地址欄URL中#符號(也稱做爲錨點), hash雖然會出如今URL中, 可是不會被包含在Http請求中, 所以hash值改變不會從新加載頁面.

因爲hash值變化不會引發瀏覽器向服務器發出請求, 並且hash改變會觸發hashchange事件, 瀏覽器的進後退也能對其進行控制, 因此在HTML5以前, 基本都是使用hash來實現前端路由.

history模式的特色

利用了HTML5新增的pushState()和replaceState()兩個api, 經過這兩個api完成URL跳轉不會從新加載頁面

同時history模式解決了hash模式存在的問題. hash的傳參是基於URL的, 若是要傳遞複雜的數據, 會有體積限制, 而history模式不只能夠在URL裏傳參, 也能夠將數據存放到一個特定的對象中

vue-router實現

hash模式和history模式實現vue-router跳轉api的區別

api	hash	history
push	window.location.assign	window.history.pushState
replace	window.location.replace	window.history.replaceState
go	window.history.go	window.history.go
back	window.history.go(-1)	window.history.go(-1)
forward	window.history.go(1)	window.history.go(1)