iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 6
0
自我挑戰組

不用前端框架 手把手打造基礎SPA網站系列 第 6

[DAY06]SPA路由的應用(上篇)

大家好,在昨天有提到server side與client side運作的原理,今天我們進一步來談談SPA在路由上是如何應用的,並將搭配實例來說明。

當我們要造訪網站會透過網址路徑,由這個路徑去判斷我們請求對應的內容。傳統的方式是透過在server建立目錄與檔案,網址代表檔案路徑,每造訪一次就向server請求一次資源。SPA在前端可以做到在同一頁的網址與內容產生變化,還可以透過對應的路徑請求到相應的資源,這是怎麼做到的呢?

網址產生變化

  1. history.pushState()

history物件提供瀏覽歷史資訊,在瀏覽器最常應用的是切換上/下頁的history.go().HTML5 API的history.pushState可以做到動態操控瀏覽器歷史紀錄。首先我們來做個小測試,打開Chrome,前往google.com,直接在console輸入執行以下程式碼:

history.pushState(null,null,'/hello')

此時你應該可以發現,除了網址變化,其他地方似乎沒有改變。當你對著剛剛的網址列按下Enter後,就會得到一個404的畫面.網址都一樣,為何呈現內容不一樣?

這邊要了解一件事,網址變化不代表會跟著跳轉。我們分別解析剛剛做的行為,利用history.pushState增加了瀏覽器歷史紀錄,因為是操控歷史紀錄沒有真正轉址,所以剛剛其實還停留在google.com的頁面。後來Enter這動作,代表重新轉址,因為在server沒有找到相對應的路徑,所以傳回了404頁面。

  1. location.hash

location物件紀載了網址相關資訊,location.hash代表的是網址hash後面的部份(hash是#符號)。常看到的應用是同頁跳轉,可以通過點擊帶上#的網址,直接跳到同頁的某個區段,也就是我們所熟知的網頁錨點,同樣地這動作也不會重新發送請求。若要改變hash,我們可以使用以下語法:

location.hash='hello'

可以看到網址#後面多了hello,接著再來看看console裡也沒有跳轉紀錄。

我們再回顧昨天Gmail的例子:

當點擊其他分頁的按鈕,在網址hash後的部分產生了變化,同樣不會發送新的請求,這是因為瀏覽器在hash變化時不會重新發送請求。所以當我們要找出相對應的頁面內容,其實靠的就是變動的hash值。

小結

今日主要提到使用Javascript利用HTML5 API來讓網址產生變化,明天會接著說明如何知道網址產生變化,以及實際應用與示範,一起繼續努力!

推薦閱讀:
淺談新手在學習 SPA 時的常見問題:以 Router 為例 from Huli


上一篇
[DAY05]Server Side Render與Client Side Render
下一篇
[DAY07]SPA路由的應用(下篇)
系列文
不用前端框架 手把手打造基礎SPA網站30

尚未有邦友留言

立即登入留言