頁面請求
當我們在瀏覽器地址欄輸入url時,前端會向后端發送請求,請求相關的資源.所以,一般情況下,當我們的url發生變化時.頁面會重新向后端發送請求.
前端路由
前端路由是有單頁面模式的開發情況下衍出來的東西,也就是說:單一頁面,無序刷新url,無需向后端請求,從而實現頁面部分內容更新.對於前端開發來說,就是不同的路徑指向不同的文件.基本的邏輯是,首先有一個主頁面,然后將其他的內部內容封裝成一個個組件,根據不同的情況將不同的組件展示在主頁面的一部分.主頁面本身是不變的.對應到前端代碼中,它就是index.html.所以基本上的前端框架都會有個index.html,無論它們采取哪種路由方式.
路由實現方式
組裝的封裝都是大同小異的,剩下的就是如何去判斷我怎么去判斷如何分配組件,目前是兩種方式,一種是hash模式,一種是history模式.
hash模式
<a href='#id'>首頁</a>
其實就是window.location.hash.我們先看一下window.location是什么東西.
是url相關的東西,在這里能看到些眼熟的屬性.比如pathname.而hash則是location中#后面的部分,包含"#".我們知道當常規情況瀏覽的url發生變化時瀏覽器會向服務器發送請求獲取資源,但是hash雖然是url的一部分,它的變化卻不會引起發生請求,同時它的變化也能被監聽.所以hash模式的幾個先決條件是.
(1)hash是在一個固定的url的后面改變hash值,hash變化並不會導致瀏覽器發請求
(2)hash的變化能被監聽,會觸發window.hashChange事件.
(3)hash值並不會被放在http請求中
所以我們只需要在window.hashChange寫相關邏輯,拿到對應的hash值,然后分配給主頁面不同的組件就能實現前端的路由切換.
缺點:hash有個明顯的缺點,它是個string,而且是直接拼接到url上的,也就是說如果我要傳遞參數,將會受到長度限制,而且只能通過字符串拼接.
history模式
其實就是window.history,它包含以下內容
可以看到它自己並沒有任何函數,但是它的原型鏈上的History有不少方法.包含我們常見的back()、go()等.甚至於它本身只是對History的引用,沒有setter函數,所以它是只讀的.但是History里面提供了修改方法.
history模式主要利用了pushState()和replaceState(),
history.pushState(stateObj, "page 2", "bar.html")//三個參數分別是 帶參 title path
具體的方案:
<a href='/home'>首頁</a>
(1)處理默認事件.和hash模式不同,當前情況下如果直接點擊a標簽會發生跳轉,刷新頁面.所以要阻止a標簽默認跳轉.
(2)因為hash改變的hash值,而location改變的pathname,如果不做任何處理,瀏覽器會發出請求,但是pushState()和replaceState()這兩個api會特殊處理,讓其修改的時候不會向服務器發送請求.
(3)因為api提供了額外的參數可以接收跳轉傳參,而且因為單獨存在對象中.所以就沒有長度和數據類型限制.然后再通過window.onpopstate的event.state去拿到當前路徑下的傳進來的參數.
(4)分配組件,傳遞參數.
缺點:和hash模式一樣,它修改了url,但是hash是不會包在http請求里的,可history修改的pathname是會的.雖然你路由跳轉並不會向服務器發送請求,但是當頁面刷新時,肯定會發請求,而且瀏覽器的url又是修改過的.這時候就可能出現頁面404的問題.
比如原本是http://localhost:8000/index.html,路由跳轉之后實際上仍然在index.html上,只不過前端改了其中的某個或全部組件,到了homePage頁面,就變成了
http://localhost:8000/index.html----->http://localhost:8000/index.html/homePage
那么由於history的api的處理,並沒有發請求,所以沒問題.但是當我刷新頁面之后,便會想服務器發送請求http://localhost:8000/index.html/homePage,但是實際上服務器並沒有這個頁面,而且如果給你配了對應資源,那就不叫前端路由了.所以會出現404.
解決方案:既然前端本身就一個主頁面不變,而且無論我url如何改變,實際上都是在index.html上,那服務器就將我所有的瀏覽器資源請求都改成指向index.html.無論你怎么修改url,都返回給你index.html相關資源.里面的展示內容全交給前端管理.保證不404就行.
以上就是兩種前端路由跳轉方式的大概原理.其中history模式是需要前后端配合的,因為瀏覽器通過url向服務器發送請求請求靜態資源的時候,實際上是通過文件目錄去查找的.當前端修改url的時候,目錄去找不一定會有相關文件,最明顯的是url中homePage是不帶后綴的,怎么也得改成homePage.html這種類型的才行,不過除了url不美觀外,也不符合路由需求.所以,服務器會配置一個主要的靜態資源,比如根目錄下放一個index.html,然后將所有的靜態資源路徑請求都指向index.html(hash模式不需要這步,但也可以).無論是hash還是history模式,其他的組件或者樣式解析成json這里數據,請求靜態資源時,先給你找到index.html,然后通過解析把相關的數據注入到index.html里面,生成一個完整且每次都可以變化的頁面.