vue-router兩種模式:hash模式和history模式
阿新 • • 發佈:2020-08-04
為了構建SPA,vue引入了前端路由系統vue-router。
vue-route有兩種模式:history模式和hash模式
。
1. hash模式(vue-router預設hash模式)
hash模式背後的原理是onhashchange事件
。
window.onhashchange=function(){
let hash=location.hash.slice(1);
document.body.style.color=hash;
}
(localtion
是js裡管理位址列的內建物件,是window
物件的一部分,可通過window.localtion
訪問,在w3cshool裡的詳細介紹
由於
hash
發生變化的url都會被瀏覽器記錄下來,使得瀏覽器的前進後退都可以使用了,儘管瀏覽器沒有親求伺服器,但是頁面狀態和url關聯起來。後來人們稱其為前端路由,成為單頁應用標配。
比如http://www.abc.com/#/index
,hash值為#/index
。hash模式的特點
在於hash出現在url中,但是不會被包括在HTTP請求中
,對後端沒有影響,不會重新載入頁面。
2.history模式
history模式利用了HTML5 History Interface
中新增的pushState()
和replaceState()
方法。MDN相關介紹(需要特定瀏覽器支援)。這兩個方法應用於瀏覽器的歷史記錄棧,提供了對歷史記錄進行修改的功能。只是當他們進行修改時,雖然修改了url,但瀏覽器不會立即向後端傳送請求。
history模式
時,url就像正常的url,例如http://abc.com/user/id
相比hash模式更加好看。特別注意,history模式需要後臺配置支援
。如果後臺沒有正確配置,訪問時會返回404。通過history api,我們丟棄了醜陋的#,但是
有一個缺點
,當重新整理時,如果伺服器中沒有相應的相應或者資源,會分分鐘刷出一個404來(重新整理需要請求伺服器)。所以history模式不怕前進,不怕後退,就怕重新整理。
3.hash模式和history模式對比
pushState()
設定新的url可以是和當前url**同源的任意url;hash只可修改#
後面的部分,只能設定當前url同文檔**的url。pushState()
設定的新url可與當前url一致,這樣也會把記錄新增到棧中;hash
必須設定與當前url不同的url的,才會觸發動作將記錄新增到棧中。pushState()
通過stateObject
引數可以新增任意型別的資料到記錄中;hash
只可新增短字串。pushState()
可額外設定title
屬性供後續使用。
不過,hash模式也有比history模式優勢的地方
。
hash
模式下,僅hash
符號之前的url會被包含在請求中,後端如果沒有做到對路由的全覆蓋,也不會返回404錯誤。history
模式下,前端的url必須和實際向後端發起請求的url一致,如http://abc.com/user/id
,後端如果沒有對user/id
的路由處理,將返回404錯誤。
history模式官方文件
4.應用場景
對於一般的Vue+Vue-router+Webpack+XXX
形式1的Web開發場景,用history
模式即可,後端用Apach或Nginx
進行路由的簡單配置,同時搭配前端路由的404頁面支援。