前端路由

路由是什麼

在網絡原理中，路由指的是分組從源到目的地時，決定端到端路徑的網絡範圍的進程，作成硬件叫路由器，在路由器中維護着一個路由表，並根據此路由表決定下一跳的地址。在 web 中，同樣的原理，是指根據不一樣的 url 給其分配不一樣的控制器（處理程序）。

前端路由的出現

在最初的 web 開發中，咱們並不太關注到路由，這和當時的開發方式有關，是後端模板的渲染方式，咱們常看到的 jsp，php 都是這種方案，由後端根據請求信息來決定顯示什麼樣的頁面，此時路由是在服務端配置的。這時候的路由就是 url 和後端服務器的交互，根據不一樣的路徑顯示不一樣的資源，頁面也是一種資源。這種開發方式有明顯的不足，每切換一個頁面都要從新加載一次，即便兩個頁面有不少相同的地方。還有就是先後端的代碼揉雜在一塊兒，前端要部署一個既有前端代碼又有後端代碼的項目，不方便本地開發調試，一旦後端代碼有錯誤，前端沒法進行開發，前端被限制在後端的開發方式中，效率很低，前端迫切的須要一種革新來改變這種開發方式。

隨着先後端分離和 MVVM 概念的興起及前端工程化的發展，出現了一種新的開發方式，SPA 單頁應用，前端圈迅速崛起，有了爆發式的發展。單頁應用的意思是隻有一個頁面，是無刷新的，看到的頁面之間的跳轉其實只是組件的切換，同時 URL 也要相應的變化，爲了實現這種單頁應用，出現了前端路由。

前端路由究竟是什麼

那麼前端路由究竟是什麼？用一句話說就是 URL 和組件樹的映射關係。由於單頁應用前端整個工程實際上只有一個頁面，不一樣的 url 只是在切換不一樣的組件，實際上就是監聽 url 的變化而後按照他的規則來進行匹配。

前端路由的實現

前端路由的實現方式主要有兩種：

• hash
• history

一、hash 即 window.loacation.hash，url 中以「#」爲標識符，如：www.xxx/com/list.ht… ，這個值可讀可寫，讀取時，能夠用來判斷網頁狀態，寫入時會在不從新載入網頁的狀況下給瀏覽器增長一條歷史記錄，有了這種特性就有了前端路由的雛形，由於改變#以後的內容至關於改變了 url，可是並無從新向服務器發送請求。JavaScript 能夠經過 window.onhashchange 來監聽 url 變化，以實現不一樣組件的切換。

目前主要的路由庫有 vue-router，react-router，他們的主要功能是存儲路由的 hash 以及對應的函數，而後監聽 hash 的變化執行對應的函數。以 vue-router 爲例，看一下他的監聽源碼：

setupListeners () {  //設置監聽器
  const router = this.router
  const expectScroll = router.options.scrollBehavior
  const supportsScroll = supportsPushState && expectScroll

  if (supportsScroll) {
    setupScroll()
  }

  window.addEventListener(supportsPushState ? 'popstate' : 'hashchange', () => {
    const current = this.current
    if (!ensureSlash()) {
      return
    }
    this.transitionTo(getHash(), route => {
      if (supportsScroll) {
        handleScroll(this.router, route, current, true)
      }
      if (!supportsPushState) {   // hash變化改變view
        replaceHash(route.fullPath)
      }
    })
  })
}
複製代碼

這裏他把 hashchange 是做爲降級方案處理的，由於有更優的處理方式，下面會講。這裏只是設置監聽的代碼，固然他的先後還有一些「鉤子」，即跳轉前，跳轉後要執行的方法，甚至有可能取消這次跳轉。

二、因爲 html5 的發佈，引入了 history.pushState() 和 history.replaceState() 方法，它們分別能夠添加和修改歷史記錄條目。pushState 須要三個參數，一個狀態對象（能夠經過 onpopstate 事件獲取到），一個標題 (目前被忽略)和一個 URL，replaceState 參數也是同樣。一般與 window.onpopstate 配合使用，這個爲前端路由的另外一種模式奠基了基礎，可是這種方式的 url 是一個完整的如http://www.xxx.com/list/complete，他每一次改變都會向服務發送一次請求資源(其實咱們是沒有這個頁面地址的)，因此須要服務器端增長一條配置，若是 URL 匹配不到任何靜態資源，則應該返回同一個 index.html 頁面，這個頁面就是咱們的主頁面。

下面咱們用此種方法作一個簡版的路由，開發思想涉及到了觀察者模式，都是考慮最簡單的狀況。

結尾

目前 web 路由總體思路上是同樣的，將 url 映射到組件，在加上一系列的複雜狀況的處理，好比說 hash 模式和 history 模式如何兼容，重定向，別名，嵌套，傳參，而後是跳轉，路由之間的跳轉須要提供各類「鉤子」，處理好各類狀況就是一個完整的前端路由庫了。