vue前端路由以及vue-router兩種模式範例詳解

2022-03-05 13:00:44

前言

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

補充：路由模式解析

要講vue-router的路由模式，首先要了解的一點就是路由是由多個URL組成的，使用不同的URL可以相應的導航到不同的位置。

如果有進行過伺服器開發或者對http協定有所瞭解就會知道，瀏覽器中對頁面的存取是無狀態的，所以我們在切換不同的頁面時都會重新進行請求。而實際使用vue和vue-router開發就會明白，在切換頁面時是沒有重新進行請求的，使用起來就好像頁面是有狀態的，這是什麼原因呢。

這其實是藉助了瀏覽器的History API來實現的，這樣可以使得頁面跳轉而不重新整理，頁面的狀態就被維持在瀏覽器中了。

vue-router中預設使用的是hash模式，也就是會出現如下的URL：，URL中帶有#號

我們可以用如下程式碼修改成history模式：

import Vue from 'vue'
import Router from 'vue-router'
import Main from '@/components/Main'
Vue.use(Router)

export default new Router({
  <strong>mode: </strong><strong>'history'</strong><strong>,</strong>
  routes: [
    {
      path: '/',
      component: Main
    }
  ]
})

這樣子URL中的#號就被去除了。

實際上存在三種模式：

Hash: 使用URL的hash值來作為路由。支援所有瀏覽器。

History: 以來HTML5 History API 和伺服器設定。參考官網中HTML5 History模式

Abstract：支援所有javascript執行模式。如果發現沒有瀏覽器的API，路由會自動強制進入這個模式。