前言

相信不少伙伴都聽過SPA（單頁面應用），SPA指的是在一個應用中只有一個主的index.html頁面，區別于多頁面應用（多個index.html頁面），SPA的優點如下：
1、互動體驗良好
單頁應用的內容的改變不需要重新加載整個頁面，獲取資料也是通過Ajax異步獲取，沒有頁面之間的切換，就不會出現“白屏現象”,也不會出現假死并有“閃爍”現象，頁面顯示流暢，用戶的互動體驗得到了提升和改善，
2、前后端分離
良好的前后端分離機制，后段無需負責模板渲染、輸出頁面作業，后端API通用化，即同一套后端程式代碼，不用修改就可以用于Web界面、手機、平板等多種客戶端，
3、服務器壓力減小，節約服務器資源
單頁應用相對服務器壓力小，服務器只用出資料就可以，不用管展示邏輯和頁面合成，所以服務器的吞吐能力會得到大幅的提高，吞吐量可提升幾倍甚至幾十倍以上，
而對于單頁面應用，它是如何在一個頁面中實作視圖更新的呢？其中最重要的一個概念就是前端路由，那么接下來就做一個簡單的介紹和分析：

vue-router 介紹

vue-router是Vue.js官方提供的路由插件，專門配合vue實作路由跳轉功能，需要使用Vue.use()進行安裝，區別于傳統的通過超鏈接的形式跳轉，實作了在頁面無重繪的狀態下更新頁面視圖，用戶體驗感更好，

vue-router底層原理

vue-router的實作流程主要由如下幾個步驟：
1、url發生改變
2、觸發監聽事件
3、改變vue-router里面的current變數
4、監視current變數（變數的監視者）
5、獲取對應的組件
6、render新組件
7、頁面重新渲染

更為詳細的底層原理這里便不再贅述，可以直接去看vue-router原始碼，紙上得來終覺淺，絕知此事要躬行，自己去翻原始碼捋一捋，會有不一樣的識訓和成長，

路由的三種模式

...
export default class VueRouter {
  ...
  static install: () => void;
  constructor(options: RouterOptions = {}) {
    let mode = options.mode || "hash";
    this.fallback =
      mode === "history" && !supportsPushState && options.fallback !== false;
    if (this.fallback) {
      mode = "hash";
    }
    if (!inBrowser) {
      mode = "abstract";
    }
    this.mode = mode;

    switch (mode) {
      case "history":
        this.history = new HTML5History(this, options.base);
        break;
      case "hash":
        this.history = new HashHistory(this, options.base, this.fallback);
        break;
      case "abstract":
        this.history = new AbstractHistory(this, options.base);
        break;
      default:
        if (process.env.NODE_ENV !== "production") {
          assert(false, `invalid mode: ${mode}`);
        }
    }
  }
  ...
}

上面是vue-router原始碼片段，由此可知vue-router 有三種路由模式：hash模式、history模式和abstract模式，比較常用的是hash模式和history模式，

一般場景下，hash 和 history 都可以用，除非你更在意顏值或者有強迫癥，畢竟# 符號夾雜在 URL 里我是覺得看起來確實有些不太美麗，如果不想瀏覽器url里顯示很丑的 hash路由網址，我們可以用路由的 history 模式，這種模式利用 history.pushState API 來完成，URL 跳轉而無須重新加載頁面（后文會詳解），

hash模式與history模式都是通過瀏覽器介面實作的，除此之外vue-router還為非瀏覽器環境準備了一個abstract模式，其原理為用一個陣列stack模擬出瀏覽器歷史記錄堆疊的功能，

看到這里，小伙伴可以思考一下，在前端里面如何不重繪頁面實作跳轉？

目前瀏覽器中有兩種方式可以不重繪頁面，實作跳轉：1.HTML5的historyAPI，2.通過#，

mode引數作用

我們從上面的vue-router原始碼里看到一個非常重要的引數–mode，從代碼邏輯里可以解讀出mode的作用

作為引數傳入的字串屬性mode只是一個標記，用來指示實際起作用的物件屬性history的實作類：HashHistory，HTML5History和AbstractHistory，
在初始化對應的history之前，會對mode做一些校驗：若瀏覽器不支持HTML5History方式（通過supportsPushState變數判斷），則mode強制設為’hash’；若不是在瀏覽器環境下運行（node環境），則mode強制設為’abstract’，
VueRouter類中的onReady(), push()等方法只是一個代理，實際是呼叫的具體history物件的對應方法，在init()方法中初始化時，也是根據history物件具體的類別執行不同操作，

注：如果瀏覽器不支持，'history’模式會回滾為’hash’模式，不在瀏覽器環境下（node環境）運行會強制為’abstract’模式，

三種模式原始碼呼叫邏輯

history模式

history -> HTML5History -> window.history.pushState()、window.history.go(n)、window.history.replaceState()

app是Vue根實體，以下是原始碼呼叫邏輯，

this.$router.push() -> VueRouter.prototype.push() -> HTML5History.prototype.push() -> History.prototype.transitionTo() -> History.prototype.confirmTransition() -> History.prototype.updateRoute() -> { app._route = route } -> defineReactive(_route) setter -> dep.notify() -> Dep.prototype.notify() -> Watcher.prototype.update() -> Vue.prototype.$nextTick() ->

hash模式

hash -> HashHistory ->
- 支持window.history -> window.history.pushState()、window.history.go(n)、window.history.replaceState()
- 不支持window.history -> window.location.hash = path、window.history.go(n)、window.location.replace(url)

this.$router.push() -> VueRouter.prototype.push() -> HashHistory.prototype.push() -> History.prototype.transitionTo() -> History.prototype.confirmTransition() -> History.prototype.updateRoute() -> { app._route = route } -> defineReactive(_route) setter -> dep.notify() -> Dep.prototype.notify() -> Watcher.prototype.update() -> vm.render()

abstract模式

abstract -> AbstractHistory -> node環境下

history模式優點

history最大的優點就是長得美觀，除此之外還有如下優勢：

pushState設定的新URL可以是與當前URL同源的任意URL；而hash只可修改#后面的部分，故只可設定與當前同檔案的URL；
pushState通過stateObject可以添加任意型別的資料到記錄中；而hash只可添加短字串；
pushState可額外設定title屬性供后續使用；
history模式則會將URL修改得就和正常請求后端的URL一樣,如后端沒有配置對應/user/id的路由處理，則會回傳404錯誤，

大型單頁應用最顯著特點之一就是采用前端路由系統，通過改變URL，在不重新請求頁面的情況下，更新頁面視圖，

更新視圖但不重新請求頁面”是前端路由原理的核心之一，目前在瀏覽器環境中這一功能的實作主要有兩種方式：

利用URL中的hash（“#”），修改#后面的地址，不會重新請求頁面，但是修改#前面的地址會重新請求頁面，

//在瀏覽器的訪問歷史中增加一個記錄，并且不會重新請求頁面，只能修改#后面的部分
window.location.hash='#/b/c'

利用History API在 HTML5中新增的方法

//在瀏覽器的訪問歷史中增加一個記錄，并且不會重新請求頁面，只能同源跳轉
window.history.pushState({name:'哈哈哈哈'},'首頁','http://localhost:8080/s/b')

r o u t e r 和 router和 router和route通過Object.defineProperty實作代理，當呼叫this.$router.push()的時候，會攔截vue原型上的get操作,回傳對應的Vue._routerRoot._router的值，

Object.defineProperty(Vue.prototype, "$router", {
  get() {
    return this._routerRoot._router;
  },
});
Object.defineProperty(Vue.prototype, "$route", {
  get() {
    return this._routerRoot._route;
  },
});
Vue.component("RouterView", View);
Vue.component("RouterLink", Link);

之所以視圖可以更新，是因為_route是回應式的，即當 _route變化時，會攔截set操作，呼叫dep.notify()更新視圖，

history模式缺點

我們知道對于單頁應用來講，理想的使用場景是僅在進入應用時加載index.html，后續在的網路操作通過Ajax完成，不會根據URL重新請求頁面，但是難免遇到特殊情況，比如用戶直接在地址欄中輸入并回車，瀏覽器重啟重新加載應用等，

hash模式僅改變hash部分的內容，而hash部分是不會包含在HTTP請求中的：

http://oursite.com/#/user/id   // 如重新請求只會發送http://oursite.com/

故在hash模式下遇到根據URL請求頁面的情況不會有問題，

而history模式則會將URL修改得就和正常請求后端的URL一樣

http://oursite.com/user/id

在此情況下重新向后端發送請求，如后端沒有配置對應/user/id的路由處理，則會回傳404錯誤，

解決方案：在服務端增加一個覆寫所有情況的候選資源：如果 URL 匹配不到任何靜態資源，則應該回傳同一個 index.html 頁面，這個頁面就是你 app 依賴的頁面，同時這么做以后，服務器就不再回傳 404 錯誤頁面，因為對于所有路徑都會回傳 index.html 檔案，為了避免這種情況，在 Vue 應用里面覆寫所有的路由情況，然后在給出一個 404 頁面，或者，如果是用 Node.js 作后臺，可以使用服務端的路由來匹配 URL，當沒有匹配到路由的時候回傳 404，從而實作 fallback，

從總結起來，history的缺點如下：

在用戶手動輸入地址或重繪頁面時會發起url請求，后端需要配置index.html頁面用戶匹配不到靜態資源的情況，否則會出現404錯誤，但是有解決方案，
兼容性比較差，pushState() 和 replaceState() 方法，需要特定瀏覽器的支持，

從辯證法的角度說，任何事物都具有兩面性，要全面客觀的看待事物，history模式和hash模式都有自己的優缺點，專案中采用哪種模式要根據實際情況來定，具體問題具體分析，鞋子合不合穿自己最清楚，

從檔案系統直接加載Vue單頁應用

要想從檔案系統直接加載Vue單頁應用而不借助后端服務器，除了打包后的一些路徑設定外，還需確保vue-router使用的是hash模式，

vue-router路由優缺點

優點：
用戶體驗好良好，不需要每次都從服務器全部獲取資料，快速展現給用戶，并節省了服務器資源，
缺點：
不利于網頁的SEO，
使用瀏覽器的前進，后退鍵的時候會重新發送請求，降低了快取的使用率
單頁面無法記住之前滾動的位置，無法在前進，后退的時候記住滾動的位置，需要指定位置跳轉等需求時困難，

總結與體會

vue-router是vue開發中常見到不能再常見的的一個組件技術了，但是并不是每個人都愿意去花時間去深究它的原理和使用，在作業之余，我花了一些時間去學習它，研究它，加深了對vue-router的理解，每項小的技術都有它的獨特之美，我們需要去發現這種美，畢竟萬丈高樓平地起，需要牢固的根基也需要每一塊磚的堆砌，對于作業和生活，我們也應保持同樣的態度，事情不管多小，我們應盡力做好每一件事，做好每一件小事，才能做好能做好更大的事，不積跬步無以至千里，不積小流，無以成江海，

下一步計劃：手寫vue-router，

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/304115.html

標籤：其他

上一篇：Windows下Node.js安裝vue/cli以及創建簡單vue專案

下一篇：vue-ELement：前端遞回組件，組成評論展示效果

談談vue-router的實作原理

前言