Vue-Router 原始碼分析(二) 設計思想及代碼結構-有解無憂

根據VueRouter的執行流程，可以通過這三個步驟來理解它的設計思想:

第一步:我們new VueRouter創建VueRouter實體的時候會通過深度遍歷把傳入的router屬性對應的陣列給決議一下，保存到一個Map中，每個Map對應router的一個元素，我們稱之為路由記錄，決議的時候會給每個路由記錄增加一個正則運算式，用于<vuerouter-link>組件在渲染時查找哪個路由記錄可以與之匹配
第二步:決議<router-link></router-link>組件的時候首先獲取名為to的props(例如<router-link to="/login"><a>登陸</a></router-link>里的to屬性)，然后會遍歷第一步Map里的每個記錄(路由記錄)，并用路由記錄中的正則去匹配這個to值，看看該正則是否能匹配，如果能匹配則表示可以渲染這個路由記錄對應的組件了，然后通過Vue內部的$createElement全域函式渲染一個原生DOM標簽(默認為a標簽，可以通過<router-link/>組件的tag這個props去修改它)，渲染后會在這個DOM物件上系結一個click事件，當click事件觸發時，會呼叫VueRouter實體的push()方法去修改路由,注意，VueRouter是通過click事件來觸發路由的，不是通過a的href屬性來觸發，如果通過event這個props傳入了其它事件，則也會進行系結
第三步:就是渲染<router-view><router-view/>組件了,它首先會獲取當前<router-view></router-view>相對于最頂層的大Vue實體所嵌套的深度的層次數，然后this.$route.matched上保存了所有父鏈路由對應的component資訊的(this.$route.matched是當前路由記錄對應的所有嵌套路勁片段的路由記錄，也就是所有父路由物件都在這個陣列里面，包含了當前頁面的路由資訊)，這樣就可以通過這個物件獲取當前需要渲染的組件了，this.$route物件是個回應式資料，根據不同的頁面，都會變動的，后面會再單獨講解一下$router和$route的區別

VueRouter里的路由有三種模式:

hash 使用 URL hash 值來作路由
history 依賴 HTML5 History API 和服務器配置
abstract 支持所有 JavaScript 運行環境，如 Node.js 服務器端

writer by:大沙漠 QQ:22969969

這三種模式有很多共同點，所以VueRouter在實作的時候定義了一個History基類，在基類上定義共同方法，然后再定義三個子類，分別繼承整個History類來實作，如下:

class History {
    //定義一些公共方法，例如跳轉操作
}

class HashHistory extends History {
    //hash模式的差異實作，例如獲取hash值，設定hash值
}

class HTML5History extends History {
    //html5模式的差異實作,例如獲取當前地址，設定當前地址
}

class AbstractHistory extends History {
    //abstract模式的差異實作
}

vuerouter會根據當前的模式，來創建一個對應的History的實體，再在整個實體上進行一系列操作

VueRouter的加載程序

在VueRouter加載的時候，對于瀏覽器環境它會執行Vue.use(VueRouter)自動進行安裝，如下:

if (inBrowser && window.Vue) {    //如果在瀏覽器環境下且window.Vue存在
  window.Vue.use(VueRouter);        //則呼叫window.Vue.use安裝VueRouter，此時就會執行install方法
}

vue插件安裝的時候就會執行對應的install方法，與加載有關的如下:

    function install(Vue) {                                 //Vue-router的安裝方法
        /*略*/
        Vue.mixin({                                             //混入生命周期函式 注意函式內的背景關系是Vue實體
            beforeCreate: function beforeCreate() {                 //beforeCreate生命周期函式
                    if (isDef(this.$options.router)) {                  //如果this.$options.router存在    ;就是在創建Vue實體時傳入的router物件
                        this._routerRoot = this;                            //在Vue實體上添加一個_routerRoot指向自己，即Vue實體
                        this._router = this.$options.router;                //在Vue實體上添加一個_router指向構造時的vue-router實體
                        this._router.init(this);                            //vue-router實體呼叫init()進行初始化，引數為Vue實體
                        Vue.util.defineReactive(this, '_route', this._router.history.current);  //通過Vue的defineReactive把_router變成回應式，等于this._router.history.current
                    } else {                                            //非根組件
                        this._routerRoot = (this.$parent && this.$parent._routerRoot) || this; //如果this.$options.router則設定$this._routerRoot為占位符節點的_routerRoot，這樣就可以訪問到vue-rooter實體了
                    }
                    registerInstance(this, this);
                },
            destroyed: function destroyed() {                       //銷毀生命周期函式
                registerInstance(this);
            }
        });
        /*略*/
        Vue.component('RouterView', View);                      //注冊RouterView組件
        Vue.component('RouterLink', Link);                      //注冊RouterLink逐漸
 
    }

我們可以看到通過mixin混入在vue的beforeCreate生命周期函式內插入了一段代碼，會通過this.$options.router.init(this)執行初始化代碼(this.$options.router就是我們執行new Vue()時傳入的VueRouter實體),這樣就會執行VueRouter的init()方法了，另外還會執行Vue.component()方法將RouterView和RouterLink組件注冊為全域組件，

VueRouter的init方法就是初始化路由，如果當前頁面沒有路由(例如http://test.com/)則初始化為根地址/(例如http://test.com/#/)，就是執行基類的transitionTo方法進行跳轉的程序，具體就不貼代碼了，一貼就太多代碼了，

VueRouter的執行程序

我們以上一篇文章https://www.cnblogs.com/greatdesert/p/12398443.html為例，依次整理一下VueRouter的執行程序

上面是加載的程序，對于例子里們我們執行new Vuerouter的時候:

    const routes = [                                                         //定義路由指向
        {path:'/login',component:login},
        {path:'/hello',name:'user',component:hello},
        {path:'/info/:id',component:info},
    ]

    var router = new VueRouter({                                             //創建一個VueRouter實體
        routes
    })

會執行vue-router的建構式:

var VueRouter = function VueRouter (options) {         //建構式
  if ( options === void 0 ) options = {};                 //如果option為undefined,則修正為空物件

  this.app = null;
  this.apps = [];
  this.options = options;
  this.beforeHooks = [];
  this.resolveHooks = [];
  this.afterHooks = [];
  this.matcher = createMatcher(options.routes || [], this);         //將路由資訊轉換為一個物件資訊，回傳一個物件，含有match和addRoutes屬性，分別對應兩個函式

  //初始化/修正mode
  var mode = options.mode || 'hash';                                                         //如果沒有傳mode,則默認為hash模式
  this.fallback = mode === 'history' && !supportsPushState && options.fallback !== false;     //如果當前為history模式，但是瀏覽器不支持PushState，則fallback不為false 則設定fallback為true
  if (this.fallback) {
    mode = 'hash';
  }
  if (!inBrowser) {
    mode = 'abstract';
  }
  this.mode = mode;

  switch (mode) {                                                 //根據不同的模式，對this.history做出實體化
    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:
      {
        assert(false, ("invalid mode: " + mode));
      }
  }
};

createMatcher函式會決議我們傳入的router值，該函式邏輯如下:

function createMatcher (routes,router) {    
  var ref = createRouteMap(routes);                              //創建一個Map，就是上面第一步說的路由記錄
  var pathList = ref.pathList;
  var pathMap = ref.pathMap;
  var nameMap = ref.nameMap;

  function addRoutes (routes) {
    createRouteMap(routes, pathList, pathMap, nameMap);
  }

  function match (raw,currentRoute,redirectedFrom) {/**/}
  function redirect (record,location) { /**/ }

  function alias (record,location,matchAs) { /**/ }
  function _createRoute (record,location,redirectedFrom) { /**/ }

  return {match: match,addRoutes: addRoutes}                 //回傳這一個物件，我們可以通過直接執行這兩個鍵對應的函式來匹配路由記錄
}

對于例子里來說，執行到這里創建的路由記錄如下:

nameMap是給命名路由用的，pathList是存盤所有的路勁，pathMap才是所有路由記錄的地方，

有了路由記錄，vue-link和vue-view組件就可以大展手腳了，這兩個組件后面再單獨詳解

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

標籤：HTML5

上一篇：回應式網頁設計專案#3---Product Landing Page----電商企業---伯庫電玩的塞爾達促銷頁面

下一篇：高德地圖API 之行政區+范圍+平移+經緯度+滑鼠樣式