(解析)單頁應用路由實現沒那么難--Vue

libxd 發布于2019-08-22 18:15 / 2422人閱讀

摘要：這段話沒具體應用過之后根據不同的，來執行不同的方案構造器構造器接收個參數，和是在定義新路由的時候創建的對象如果沒有傳，則為，這是通過一個名為的外部工具為加上強類型檢查的功能，不影響編譯和運行。

前言

單頁Web應用（single page web application，SPA），就是只有一張Web頁面的應用，是加載單個HTML 頁面并在用戶與應用程序交互時動態更新該頁面的Web應用程序。簡單來說就是用戶只需要加載一次頁面就可以不再請求，當點擊其他子頁面時只會有相應的URL改變而不會重新加載。
我們可以將實現路由的過程分為兩部分:

更新URL頁面不刷新

監聽URL的變化，執行頁面替換邏輯

現在主流有2種實現方案:

history.pushState等觸發popstate事件

location.hash的變化觸發hashchange事件

接下來我們一步一步看Vue-router如何實現的

Vue-router源碼解剖 構造器

請各位同學翻到 src/index.js 第18行

export default class VueRouter {
  static install: () => void;
  static version: string;

  app: any;
  apps: Array;
  ready: boolean;
  readyCbs: Array;
  options: RouterOptions;
  mode: string;
  history: HashHistory | HTML5History | AbstractHistory;
  matcher: Matcher;
  fallback: boolean;
  beforeHooks: Array;
  resolveHooks: Array;
  afterHooks: Array;

  constructor (options: RouterOptions = {}) { 
    this.app = null
    this.apps = []
    this.options = options
    this.beforeHooks = []
    this.resolveHooks = []
    this.afterHooks = []
    this.matcher = createMatcher(options.routes || [], this)

    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}`)
        }
    }
  }

構造器接收一個options參數

默認mode為 "hash"，如果顯示傳入參數mode為"history"，則進行是否支持的"history"的判斷

    this.fallback = mode === "history" && !supportsPushState && options.fallback !== false

supportsPushState方法里面判斷了是否為瀏覽器環境且當前瀏覽器版本支持history

options.fallback用來控制路由，在設置了mode為"history"但是當前瀏覽器環境不支持"history"的情況下是否應該回調判斷，并重新設置mode為"hash"。
設置fallback為false本質上是為了讓"router-link"在IE9上可以完整的頁面刷新，如果是在hash模式下面不支持SSR，設置為false，會讓那些在ie9服務端渲染的app更好用。(這段話沒具體應用過)

之后根據不同的mode，來執行不同的方案

HTML5History

構造器

構造器接收2個參數，router和base
router是在定義新路由的時候創建的對象
base如果沒有傳，則為undefined，
"？"這是通過一個名為flow的外部工具為javascript加上強類型檢查的功能，不影響編譯和運行。直接無視就好。
調動History的構造方法，History為 HTML5History，HashHistory，AbstractHistory的超類

在History的構造方法中，

如果base為undefined，查找是否有base的元素，有就賦值，沒有就"/"
之后

const expectScroll = router.options.scrollBehavior
    const supportsScroll = supportsPushState && expectScroll

    if (supportsScroll) {
      setupScroll()
    }

判斷路由參數，是否控制路由頁面滾動條行為

監聽popstate事件，跳轉

獲取當前location的值之后，

進行路由的更新，比如當前的History對應哪個路由

Html5History也添加了go，push，replace等方法用來路由跳轉，

先保存滾動條狀態，之后可以使用history的自帶方法進行地址的改變

更多詳情請見MDN

未完待續

HashHistory 構造器

調動History的構造方法，History為 HTML5History，HashHistory，AbstractHistory的超類
判斷當前hash地址

如果開頭不是/#，將當前location按照hash格式化

根據href獲取當前hash，如果沒有匹配到"#"返回空字符串。
初始化地址欄hash后

監聽popstate事件，替換路由，控制滾動條行為

導航守衛

在registerHook將設置的守衛入棧
在每次跳轉的時候，遞歸守衛集合，將觸發的守衛進行解析和執行。

AbstractHistory 構造器

相對于上兩種方法，AbstractHistory看起來要簡單很多，這種模式是用于 Node.js 環境的，一般場景也就是在做測試的時候。但是在實際項目中其實還可以使用的，利用這種特性還是可以很方便的做很多事情的。(我沒有用過)
因為不涉及和瀏覽器地址相關記錄關聯在一起；整體流程依舊和 HashHistory 是一樣的，只是這里通過數組來模擬瀏覽器歷史記錄堆棧信息。

更新歷史堆棧信息,更新當前所處位置
等等，除了不使用瀏覽器的history對象，其他的和html5history模式差不多。

小結

vue-router的源碼剖析到這里就結束了，大概流程是這個樣子，得益于開發人員代碼的簡潔性及可讀性，我們閱讀起來障礙還是沒有那么多，難度也沒有那么大，整體邏輯不復雜，但是想要把很多不復雜的細節，整合到一起，認真到細節，才是程序設計的美學。

GPU云服務器云服務器沒那么簡單單頁應用單頁應用cdn 單頁應用程序

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/95668.html

[使用 Weex 和 Vue 開發原生應用] 6 使用 vue-router

摘要：使用值來作路由。原生應用本身就是多頁的場景，頁面間狀態的隔離比共享更重要一些。使用開發的是原生應用，頁面棧的管理使用的也是原生的特性，沒有但是有模塊可以實現頁面的前進和后退等操作。系列文章的目錄在 ? 這里（由于我比較懶最近一段時間在忙其他事，系列文章拖了好久終于又更新了。。。）什么是 vue-router ？ vue-router 官方文檔 vue-router 是針對 V...

leonardofed 2019-08-20 15:51 評論0 收藏0
單頁應用的部署方案

摘要：所以單頁應用的部署，需要將所有的頁面請求都返回，瀏覽器下載了后會自動解析并導航到對應頁面。總結單頁應用與以前的常規多頁面應用還是有區別的，開發過程與后端解耦了，同時會出現跨域鑒權以及應用部署的問題。本文同步發布于我的個人博客上 - 單頁應用的部署方案本文主要簡單講一下單頁應用的開發及部署方法，默認你懂一些服務端知識及nginx知識，如果有任何可以在下方評論留言。單頁應用 SPA（...

yanbingyun1990 2019-07-25 14:45 評論0 收藏0
前端路由簡介以及vue-router實現原理

摘要：后端路由簡介路由這個概念最先是后端出現的。前端路由模式隨著的流行，異步數據請求交互運行在不刷新瀏覽器的情況下進行。通過這些就能用另一種方式來實現前端路由了，但原理都是跟實現相同的。后端路由簡介路由這個概念最先是后端出現的。在以前用模板引擎開發頁面時，經常會看到這樣 http://www.xxx.com/login 大致流程可以看成這樣：瀏覽器發出請求服務器監聽到80端口（或4...

tuomao 2019-08-26 11:56 評論0 收藏0
面試官常問——vue篇

摘要：如果要相應狀態改變，通常最好使用計算屬性或取而代之。那解決問題的思路便是在改變的情況下，保證頁面的不刷新。后面值的變化，并不會導致瀏覽器向服務器發出請求，瀏覽器不發出請求，也就不會刷新頁面。 1.vue生命周期2.vue 雙向綁定原理3.vue router原理4.vue router動態路由 1.vue 生命周期鉤子 showImg(https://segmentfault.com/...

BlackMass 2019-08-30 15:55 評論0 收藏0
面試官常問——vue篇

摘要：如果要相應狀態改變，通常最好使用計算屬性或取而代之。那解決問題的思路便是在改變的情況下，保證頁面的不刷新。后面值的變化，并不會導致瀏覽器向服務器發出請求，瀏覽器不發出請求，也就不會刷新頁面。 1.vue生命周期2.vue 雙向綁定原理3.vue router原理4.vue router動態路由 1.vue 生命周期鉤子 showImg(https://segmentfault.com/...

xingqiba 2019-08-23 15:25 評論0 收藏0