一、入口文件分析。

vue-router的使用頁面

1. 說明VueRouter是一個(gè)插件，所以實(shí)現(xiàn)過程中需要使用install方法來實(shí)現(xiàn)一個(gè)插件。
2. 說明VueRouter是一個(gè)類，所以實(shí)現(xiàn)過程中需要?jiǎng)?chuàng)建一個(gè)類，然后構(gòu)造函數(shù)需要接收傳過來的參數(shù)。

二， 實(shí)現(xiàn)過程剖析。

使用this.$options 來接收。其他地方暫時(shí)忽略，在實(shí)現(xiàn)router-view時(shí)需要用到。

2. 實(shí)現(xiàn)插件。

以下是實(shí)現(xiàn)的代碼截圖。

實(shí)現(xiàn)router-link

Vue.js 的插件有一個(gè)公開方法 install。這個(gè)方法的第一個(gè)參數(shù)是 Vue 構(gòu)造器，第二個(gè)參數(shù)是一個(gè)可選的選項(xiàng)對(duì)象。

我們定義一個(gè)變量來接收Vue的構(gòu)造器，為保持一致，我們命名為Vue。這樣我們就可以使用Vue的一些方法了。例如Vue.mixin ,Vue.component等等。

1. 我們使用Vue的mixin（這里有mixins的相關(guān)介紹)方法,? 這樣可以在組件的鉤子函數(shù)beforeCreate生命周期在Vue的原型上掛載router，這也是為什么在vue中到處都可以使用this.$router的原因。router是從this.$options取的， vue的執(zhí)行是組件的一個(gè)個(gè)渲染的過程。并不是每一個(gè)組件都可以從this.$options 拿到router ，只有在跟組件中在可以拿到 所以加判斷 拿到了router對(duì)象，才將其掛載在原型上。

2. 接下來我們實(shí)現(xiàn)router-link組件. 組件的使用我們按照正常的組件的寫法，因?yàn)榻M件中因?yàn)閣ebpack編譯的原因（默認(rèn)情況下打包的?vue?是?runtime?版本，借助loader就完成了編譯工作，并且runtime識(shí)別的是render 函數(shù)，因此沒有?compiler模塊，也就不能解析template），所以無法使用template，所以我們使用render函數(shù)來渲染。router-link 實(shí)際上是a標(biāo)簽，然后加上屬性，跳轉(zhuǎn)就可以實(shí)現(xiàn)了。所以我們使用props的to屬性，來接收外部傳過來的值，我們用render方法的h這個(gè)參數(shù)來渲染。this.slots.default可以拿到子組件的內(nèi)容。

實(shí)現(xiàn)router-view

接下來實(shí)現(xiàn)router-view.

1.使用Vue.component這個(gè)方法，和router-link差不多，都是在render函數(shù)里面去用h方法來渲染。router-view的實(shí)現(xiàn)，只需拿到當(dāng)前路由的路由表的component在渲染出去就行了。所以我們先拿到當(dāng)前的路由。

2. 監(jiān)聽hashchange方法，當(dāng)路由改變切換時(shí)獲取hash值，然后用current這個(gè)值來接收。

2. 我們?cè)赩ueRouter的類的構(gòu)造函數(shù)中，使用Vue.util.defineReactive這個(gè)方法，讓數(shù)據(jù)變成響應(yīng)式的，這樣我們拿到的this.current就是最新的

4. 經(jīng)過以上三步的操作，我們?cè)趇nstall方法中 就可以用this.$router獲取current屬性，也就是當(dāng)前的路由。我們遍歷路由表，然后找出當(dāng)前的路由的對(duì)象，拿到component，然后渲染出去。

以上就是vue-router的簡單實(shí)現(xiàn)。實(shí)際上只實(shí)現(xiàn)了router-link和router-view這兩個(gè)功能。后續(xù)有空再繼續(xù)更新