Vue-Router 源碼分析(二) 設計思想及代碼結構

来源:https://www.cnblogs.com/greatdesert/archive/2020/03/06/12420635.html
-Advertisement-
Play Games

根據VueRouter的執行流程，可以通過這三個步驟來理解它的設計思想: 第一步:我們new VueRouter創建VueRouter實例的時候會通過深度遍歷把傳入的router屬性對應的數組給解析一下，保存到一個Map中，每個Map對應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組件就可以大展手腳了，這兩個組件後面再單獨詳解


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 定位與錨點
    文檔流： 普通流：上至下，左至右 浮動流：元素添加了float：； 定位流：添加了定位屬性 定位 position:; static 預設值 absolute 絕對定位(脫離文檔流，不占位；預設參考瀏覽器零點) relative 相對定位（占據文檔流，占位置；參考自身載入在頁面中的位置） fixed ...
  • JS實現鍵盤監聽(包括組合鍵)
    $(document).keyup(function(event){ //鍵盤按下觸法 console.log("Key: "+event.keyCode); if(event.ctrlKey && event.keyCode 67){ console.log('ctrl+V'); }}); ...
  • Node.js 創建第一個應用
    我們可以使用以下命令來查看當前的 Node 版本： node -v 接下來創建我的第一個node.js應用 server.js var http=require("http");//引入http模塊 //創建伺服器 http.createServer(function(request,respons ...
  • invalid prop `current` of type `string` supplied to `pagination`, expected `
    pagination分頁組件不支持 string的數據類型，解決問題的方法是，對傳給pagination的數據進行 Number處理下 同理，發現 element ui 也是這樣，還有下拉列表的value綁定為數值的話，做編輯操作v-model 對應的參數 （介面獲取）也要由Number處理 ...
  • VUE實現Studio管理後臺（六）：滑鼠懸停顯示彈出視窗
    這次介紹的控制項相對比較簡單，滑鼠懸停時顯示彈出內容，效果如下： 為了增加靈活性，用slot實現，調用時的代碼： <MouseOverPop class="toolbox-element"> <template #heading> <div class="element-title"> 服務 </di ...
  • electron-vue 安裝時報錯，vue無法載入………npm/vue.ps1，因為在此系統上禁止運行腳本，請閱讀……
    我是在安裝 electron-vue 時遇到的報錯信息，報錯圖片如下 運行安裝模板時出現報錯，究其原因是因為 vue 的問題，而不是 electron ，具體解決方法如下： 必須要以管理員身份運行 終端 ，不然會報錯。 密令： get-ExecutionPolicy set-ExecutionPol ...
  • VUE實現Studio管理後臺（五）：手風琴式摺疊組件（Accordion）
    作為一個有目標的人（目標是做一個好用的Bootstrap可視化編輯器，第一個版本已經實現，演示地址：https://vular.cn/rxeditor/，代碼地址：https://github.com/vularsoft/rxeditor），工作比較積極，思維也比較活躍，睡眠相對較少。今早6:30就 ...
  • 教你輕鬆搞定javascript中的正則
    1 正則表達式概述 1.1 什麼是正則表達式 正則表達式（Regular Expression）是用於匹配字元串中字元組合的模式。在Javascript中，正則表達式也是對象。正則表通常被用來檢索，替換那些符合某個模式（規則）的文本，例如驗證表單：用戶名錶單隻能輸入英文字母、數字或者下劃線，昵稱輸入 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類