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

丶Serendipity丶發表於2022-03-04
Vue前端路由模式

前言

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

寫在最後

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

 



相關文章