vue--前端路由及vue-router兩種模式

丶Serendipity丶發表於2022-03-04

前言

  路由這個概念最早在後端出現,隨後前後端分離,直至當今的單頁面應用,路由也在一直髮生變化。本文來總結一下路由變化和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屬性供後續使用。

寫在最後

  以上就是本文的全部內容,希望給讀者帶來些許的幫助和進步,方便的話點個關注,小白的成長之路會持續更新一些工作中常見的問題和技術點。

 



相關文章