分析vue-router的使用下圖：
vue-router源碼分析：
1、路由的創(chuàng)建需要使用new關(guān)鍵字，說明vue-router是一個(gè)構(gòu)造函數(shù)，需要用new來實(shí)例化一個(gè)構(gòu)造函數(shù)。
2、使用實(shí)例化的對象時(shí)需要使用use方法，說明vue-router是一個(gè)插件。
3、router-link和router-view是組件，需要去實(shí)現(xiàn)他。
代碼入下圖：
1、創(chuàng)建VueRouter類，實(shí)現(xiàn)構(gòu)造函數(shù)，保存用戶的路由。
2、通過Vue.use(VueRouter)得知是一個(gè)插件，接下來需要實(shí)現(xiàn)插件。
在install中需要用到全局混入，通過混入延遲到vue組件實(shí)例，有了router以后，在vue實(shí)例下創(chuàng)建$router。將$options.router賦值給vue實(shí)例下的$router，這樣就實(shí)現(xiàn)了this.$router.push()方法。
3、實(shí)現(xiàn)router-link和router-view兩個(gè)組件。
（1）router-link
a標(biāo)簽：router-link實(shí)際上要實(shí)現(xiàn)a標(biāo)簽的跳轉(zhuǎn)
render():由于不能使用template模版編譯，所以只用render函數(shù)渲染a標(biāo)簽。
to：作為父組件傳遞給子組件的一個(gè)值。設(shè)定為必傳。
this.$slot.default:通過插槽，將父組件里的內(nèi)容傳遞給子組件。
最后需要實(shí)現(xiàn)的鏈接：
return <a href={'#'+this.to}>{this.$slots.default}</a>
（2）router-view
router-view作為路由的出口，進(jìn)行渲染路徑下組件的內(nèi)容。需要在$router.$options下面定義個(gè)current參數(shù)，表示當(dāng)前路徑。這里我們用hash模式實(shí)現(xiàn)，這就需要在創(chuàng)建VueRouter實(shí)例對current進(jìn)行定義，如下圖：
第一步：獲取當(dāng)前路由，同時(shí)通過defineReactive對current定義為響應(yīng)式數(shù)據(jù)，這樣就能確保this.current改變時(shí)，router-view能再次r執(zhí)行ender函數(shù)。
第二步：全局監(jiān)聽hashchange方法，當(dāng)hash路由改變時(shí)，就把當(dāng)前路徑傳遞給current。
最后在router-view中，通過current路徑在找到$router.$options.routes下面對應(yīng)的組件，并對組件進(jìn)行渲染。
最后vue-router輪子造完了，這個(gè)案例暫時(shí)沒有實(shí)現(xiàn)子級路由嵌套問題，而vue底層是通過命名depth深度變量，來計(jì)算路由深度，通過計(jì)算深度，來確定父子級關(guān)系。
