vue router的兩種模式的區別

2021-09-23 10:35:32 字數 911 閱讀 4012

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

缺點: 不利於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...