前言
路由這個概念最早在後端出現,隨後前後端分離,直至當今的單頁面應用,路由也在一直髮生變化。本文來總結一下路由變化和vue-router中的路由模式區別相關知識點。
正文
1、什麼是前端路由
(1)後端路由階段
早期的頁面都是由html頁面在服務端渲染的,服務端直接返回給客戶端渲染好的html頁面供展示,一個頁面對應一個URL,首先向服務端請求對應的URL,伺服器根據此URL去匹配對應的controller,最終生成html頁面返回給客戶端。這種方法有利於SEO的優化,但是這種頁面html和資料邏輯混合在一塊,開發人員開發維護起來困難。
(2)前後端分離路由階段
隨著Ajax的出現,由了前後端分離的開發方式,後端只負責邏輯處理和返回資料,前端只負責通過ajax將資料渲染到頁面。
(3)單頁面應用階段
其實SPA最主要的特點就是在前後端分離的基礎上加了一層前端路由.也就是前端來維護一套路由規則。
2、vue-router 提供了 hash 和 history 兩種路由模式
vue-router的作用就是通過改變URL,在不重新請求頁面的情況下,更新頁面檢視。簡單的說就是,雖然位址列的地址改變了,但是並不是一個全新的頁面,而是之前的頁面某些部分進行了修改。要想解決上面的問題,前提需要知道瀏覽器window的history物件和location物件的hash屬性(詳情見 history物件詳解),這兩個物件分別存在頁面路徑跳轉,但是頁面不重新整理的功能。
(1)hash模式
對應了location物件的hash屬性,vue-router 預設 hash 模式,使用 URL 的 hash 來模擬一個完整的 URL,於是當 URL 改變時,頁面不會重新載入。
location.hash 對應 "(#)" 後面的字串,比如:https://xxx.cn/xxx/6844904062698127367#heading 對應的值為 "#heading",後面 hash 值的變化,並不會導致瀏覽器向伺服器發出請求,瀏覽器不發出請求,也就不會重新整理頁面。另外每次 hash 值的變化,還會觸發 hashchange 這個事件,通過這個事件我們就可以知道 hash 值發生了哪些變化。然後我們便可以監聽 hashchange 來實現更新頁面部分內容的操作:比如下面的程式碼監聽一個網頁 hash 值變化
window.addEventListener('hashchange', function() { console.log('The hash has changed!') }, false);
當網頁點選返回或者前進的時候,hash值會發生變化,會觸發上面的hashchange事件並列印。
(2)history模式
如果不想要很醜的 hash,我們可以用路由的 history 模式,這種模式充分利用 history.pushState API 來完成 URL 跳轉而無須重新載入頁面,同時還有popstate 事件來監聽state變化,這樣位址列中路徑就沒有了"#",但是當使用者使用了重新整理等操作的時候,瀏覽器會給伺服器傳送請求,為了避免這種情況出現,所以這個實現需要服務端的支援,需要把所有路由都重定向到根路由,這裡省略服務端的配置。
window.addEventListener('popstate', function() { console.log('The state has changed!') }, false);
(3)兩種模式的比較
同:hash和history都是屬於瀏覽器自身的特性,Vue-router只是利用了這兩個特性(通過呼叫瀏覽器介面)來實現前端路由。
不同:hash模式 會在瀏覽器的URL中加入'#',而HTM5History就沒有'#'號,URL和正常的URL一樣。
history比於直接修改hash主要有以下優勢:a、pushState設定的新URL可以是與當前URL同源的任意URL;而hash只可修改#後面的部分,故只可設定與當前同文件的URL;b、pushState設定的新URL可以與當前URL一模一樣,這樣也會把記錄新增到棧中;而hash設定的新值必須與原來不一樣才會觸發記錄新增到棧中;c、pushState通過stateObject可以新增任意型別的資料到記錄中;而hash只可新增短字串,且pushState可額外設定title屬性供後續使用。
寫在最後
以上就是本文的全部內容,希望給讀者帶來些許的幫助和進步,方便的話點個關注,小白的成長之路會持續更新一些工作中常見的問題和技術點。