Vue Router原始碼分析之install方法

系列文章：

vue-router 原始碼學習之我們從api中看些門道

vue-router原始碼分析之index.js

vue-router原始碼分析之install方法

使用過vue的coder都知道，如果想註冊乙個vue的外掛程式，在vue物件上能夠使用的話（並不是綁在vue.prototype上的那種暴力方式），必須使用vue.use(你的外掛程式)的方式來註冊外掛程式，

vue.use方法會尋找外掛程式上的install方法，並且執行，如果外掛程式沒有install方法的話，就會報錯，無法使用use來註冊外掛程式。哦喲，是真的傲嬌的一匹，所以想要使用vuerouter外掛程式的話，就必須擁有乙個install方法，

所以我們來看看vuerouter的install方法都做了什麼？

**實在是不少，我是真的沒辦法一口氣複製過來，截個圖先給大家做乙個展示吧

簡單看來： vue.mixin：侵入式的對每個vue component進行了擴充套件

用es5的defineproperty的方式設定$router與$route屬性。

建立了routerview 與routerlink兩個元件

對路由鉤子進行乙個統一設定（這塊沒看vue.config.optionmergestrategies）的原始碼，目前還不是很熟，當然這不重要了。先往下看

大家都知道，vue.mixin、vue.component都是vue類的方法，vue-router想要使用的話就必須引入vue，這是毋庸置疑的，但是如果把vue打包進入vue-router的原始碼內，這必然導致vue-router的包變得很大，

關鍵問題！！！目前沒有發現用vue開發時哪個使用vue-router開發不提前引入vue的。

// 宣告乙個私有的_vue用來接收外部的vue類。
export
let _vue
//install方法接收乙個引數，也就是vue類
export
function
install (vue) 
}複製**

說到這裡可能會很亂，我們先留下來這個內容，一會去看看**會呼叫它。

vue.mixin( else 
registerinstance(this, this)
},destroyed () 
})複製**

看到這裡我們應該了解，vue-router在install的時候侵入了每個vue componet的beforecreate以及destroyed生命週期鉤子中，在建立之前以及摧毀的時候做一些事情。做了什麼呢？我們好像看到了registerinstance方法。

// 接受了vue componet自己
registerinstance(this, this)
複製**

這個時候重新看一下這個方法，意思就是尋找這個方法去呼叫一下，this.$options._parentvnode.data.registerrouteinstance（這個方法誰有呢？）這個我也不知道，我就寫在乙個子元件內的方法，去檢視一下它的父元件們族譜中誰有這個方法。

(function(t)else
}return
'not find'
})(t)
複製**

各位看官這是乙個很拙劣的方法（勿學）以後會優化這個方法的。然後發現這個this是誰呢？就是在你使用vue-router時，那個我們對每個元件設定path的那個元件。可以看下面

new vuerouter(]
})複製**

每個有這個方法的應該都是這裡面設定過的元件，所有我就有乙個猜測，是不是路由的改變會導致該路徑跳轉前後的元件進行生成與摧毀（展示與隱藏）在這些元件建立之前會呼叫registerinstance方法（這個方法我還沒看內部實現）。以後會去驗證這個猜測的準確程度。

//所以所有的vue component的_routerroot、_router、都是一樣的。

// this.$options.router存在嗎？==》是不是已經繫結萬_routerroot的根節點

if (isdef(this.$options.router)) else

registerinstance(this, this)

複製**

所以大家可以嘗試的在vue專案中列印出元件本身，檢視_routerroot屬性時，每個元件的uid都是一樣的，$el也是根節點標籤的id 。這不實錘了！！

我們可以看出來在vuerouter在註冊方面有哪些重要的事？

install方法就介紹到這裡，下一節會開始講述vue-router的主建構函式。前端er，下一期不見不散