優點: 良好的互動體驗,使用者不需要重新整理頁面,頁面顯示流暢, 良好的前後端工作分離模式,減輕伺服器壓力,
缺點: 不利於seo,初次載入耗時比較多
對於hash模式會建立hashhistory物件,在訪問不同的路由的時候,會發生兩件事:
hashhistory.push()將新的路由新增到瀏覽器訪問的歷史的棧頂,和hashistory.replace()替換到當前棧頂的路由
3、history模式
主要使用html5的pushstate()和replacestate()這兩個api來實現的,pushstate()可以改變url位址且不會傳送請求,replacestate()可以讀取歷史記錄棧,還可以對瀏覽器記錄進行修改
window.history.pushstate(stateobject, title, url)
window.history.replacestate(stateobject, title, url)
包括back,forward , go 三個方法
history.go(-2);//後退兩次
history.go(2);//前進兩次
history.back(); //後退
hsitory.forward(); //前進
區別:前面的hashchange,你只能改變#後面的url片段。而pushstate設定的新url可以是與當前url同源的任意url。
history模式則會將url修改得就和正常請求後端的url一樣,如後端沒有配置對應/user/id的路由處理,則會返回404錯誤
vue router的兩種模式
hash模式的工作原理是onhashchange事件,通過window.location.hash訪問 window.onhashchange function 由於hash發生變化的url都會被瀏覽器記錄,雖然瀏覽器沒有請求伺服器,但頁面狀態和url關聯起來了。這就是前端路由 更新檢視但不會重新請...
vue router的兩種模式的區別
大家都知道vue是一種單頁應用,單頁應用就是僅在頁面初始化的時候載入響應的html css js 優點 良好的互動體驗,使用者不需要重新整理頁面,頁面顯示流暢,良好的前後端工作分離模式,減輕伺服器壓力 缺點 不利於seo,初次載入耗時比較多 通過history api,我們丟掉了醜陋的 但是他有個毛...
vue router的兩種模式的區別
眾所周知,vue router有兩種模式,hash模式和history模式,這裡來談談兩者的區別。hash模式背後的原理是onhashchange事件,可以在window物件上監聽這個事件 上面的 可以通過改變hash來改變頁面字型顏色,雖然沒什麼用,但是一定程度上說明了原理。更關鍵的一點是,因為h...