關於hash路由和history路由

2022-03-11 01:41:46 字數 1522 閱讀 2339

1.參考文件

hash模式?history模式 : 

window.location.hash和search掐架: 

2.問題**

3.關於兩種路由的組成

hash模式:://@:/?#?

簡單總結:除去伺服器需要使用的,能使用的僅剩下了hash,hash改變不會重新整理頁面,hash值改變會增加歷史記錄(就是會有頁面的前進後退)

#號前為需要請求伺服器路由,#後為前端路由。

history模式:://@:/?#

簡單總結:有兩個api,乙個是pushstate,向瀏覽器的歷史記錄中新增一條歷史,同時將位址列改為相應的位址,但卻並不會導致瀏覽器重新整理。另乙個是replacestate,直接替換位址列的鏈結,不會產生新的歷史,同樣不會導致瀏覽器重新整理。這兩api僅能改變url?部分,並不能改變其餘部分。伺服器需要有對應的資源

4.解析url位址獲取需要的引數

按照上面的說法就是,例如乙個鏈結,

window.location.hash拉取#/號後面的東西,歸為hash部分,那這個鏈結的hash部分就是   #/?75444

window.location.search拉取的是遇到?號後面的東西,那這個鏈結的search部分就是  ?tid=cedd48&uid=rai***001

這時候我們要拿到tid和uid的值,只要處理window.location.search就可以了對吧.

但如果這時候我們另一套分享鏈結是這樣:

cedd48

&uid=

rai***001

那這時候我們的

就不一樣了吖,哭泣...這時候我根據window.location.search無法提取tid和uid,只能根據window.location.hash進行擷取....就是說,遇到#/後面的問號已經歸入hash值了,不會再重新解析到?後面作為search值啦.當時native的我模模糊糊知道這裡有坑,結果真的有坑....

所以要使用這種方式解析url拿引數值的時候一定要做好方案,最好是先判斷是否有window.location.search,如果公尺有就取window.location.hash..這樣就穩妥一點,要不就自己很確定自己的鏈結是哪一種,不要踩了這個坑點.

hash路由和history路由

hash模式 url後面的有乙個 後面的字串,叫hash值,也叫錨點。1 hash 值變化不會導致瀏覽器向伺服器發出請求 2 hash 改變會觸發 hashchange 事件 當hash值變化了,就會觸發事件 3 在 html5 的 history 出現前,基本都是使用 hash 來實現前端路由的 ...

路由的hash和history模式

為了構建 spa 單頁面應用 需要引入前端路由系統,這也就是 vue router 存在的意義。前端路由的核心,就在於 改變檢視的同時不會向後端發出請求。為了達到這種目的,瀏覽器當前提供了以下兩種支援 history 利用了 html5 history inte ce 中新增的 pushstate ...

高階前端路由hash和history

最開始路由就是簡單的乙個url,在瀏覽器輸入url位址向伺服器傳送請求,伺服器會根據這個位址將對應的html檔案返回給瀏覽器進行渲染,如果這個頁面還用到了外部的js和css資源檔案,瀏覽器將會再傳送一次請求,伺服器才會將對應的資源返回給瀏覽器。這樣的話我們可以簡單的模擬一下,當使用者首次訪問 時,輸...