vue router原始碼解讀

2021-09-25 13:06:21 字數 892 閱讀 8802

vue-router是vue全家桶中的一員。當初學習的時候,因為內容比較簡單,只是匆匆瀏覽了一下文件就開始對照api幹活了,對history mode的實現也僅僅是知道用到了h5的history的方法。這次其實是為了看看vue-router是怎麼用roll-up打包的,但下下來之後發現**量很少,說白了vue-router也只是乙個mixin而已。索性就通讀一遍原始碼吧。

vue-router的版本是3.0.7,git clone後,我刪掉了chromedriver包再npm install。因為這個包是chrome的驅動,非常龐大,是e2e測試的時候用的,基本用不著,建議刪掉。

vue-router採用roll-up打包,引入了typescript。源**放在src檔案下。src的檔案目錄為:

— components 裡面包含了link和view兩個路由元件

— history 定義了history基類和abstracthistory, html5history, hashhistory幾個衍生類。是vue-router的功能實現的主體。

— util 定義了非同步、dom處理、滾動處理等工具函式

— create-matcher.js 匯出了creatematcher函式,該函式接收routes,router兩個引數,返回具有match方法和addroutes方法的matcher物件。

— create-route-map.js 匯出了createroutemap函式。該函式根據routes和舊的pathmap等,生成新的pathlist, pathmap, namemap,並確保通配路由*永遠在最後。

— index.js 打包入口檔案,匯出vuerouter類。

— install.js 將vue-router作為mixin注入,註冊routerview,routerlink元件,同時匯出vue供其他模組使用。

vue router原始碼隨筆

外掛程式執行入口 if inbrowser window.vue 外掛程式給vue物件例項暴露了兩個屬性 object.defineproperty vue.prototype,router this.routerroot在beforecreate中定義。object.defineproperty ...

vue router原始碼解析(一)

vue router是vue.js官方的路由管理器。它和vue.js的核心深度整合,讓構建單頁面應用變得易如反掌。這裡主要通過閱讀vue router的原始碼,對平時使用較多的一些特性以及功能,理解其背後實現的思路。3.0.2 components 元件 link.js route link的實現 ...

openTLD 原始碼解讀

首先是run tld 在其次就是tldexample 最後到了初始化函式tldinit 第乙個比較關鍵的函式 bb scan 將影象網格化,將首先 scale 1.2.10 10 21 個規格 在每個規格上打網格 這個函式有乙個比較重要的方法 ntuples 就是重複 因為網格上的點很多點有相同的x...