前言
? ? 使用vue開發(fā)狮腿，必然繞不過vueRouter忿墅，本節(jié)將一步步實現(xiàn)一個簡易的history版本闷旧，它包括如下閹割版功能：視圖出口router-view窃这、導(dǎo)航組件link和導(dǎo)航鉤子beforeEach
向vue注冊掛載
? ? 通過Vue.use將插件掛載給Vue明未，Vue處理后將回調(diào)install并將vue實例回傳槽华。我們在install函數(shù)中拿到vue實例并通過mixin掛載beforeCreate，這將在組件初始化過程中經(jīng)過配置合并后與組件自身的鉤子函數(shù)合并并跑一遍執(zhí)行
? ? 和vuex一樣趟妥，我們應(yīng)當(dāng)確保全局只有一個路由實例硼莽，其初始化邏輯也應(yīng)當(dāng)只執(zhí)行一次。對于其他的組件煮纵，都向上取即可懂鸵。同時，我們還要提供訪問別名即：this.$router
注冊導(dǎo)航組件
? ? 到此為止行疏，我們已經(jīng)向vue的各個組件注入了路由實例匆光，現(xiàn)在接著在install中調(diào)用vue.component方法向vue掛載導(dǎo)航組件
? ? ?我們的導(dǎo)航組件就是一個a標(biāo)簽，它接收一個to屬性酿联，用以標(biāo)識即將跳轉(zhuǎn)的路由终息，且默認(rèn)綁定一個click事件用以處理跳轉(zhuǎn)路由邏輯
完成初始化邏輯
? ? 首先夺巩，在構(gòu)造函數(shù)中，接收一下外部傳遞的路由列表
? ? 在init函數(shù)中注冊hashChange事件周崭，監(jiān)聽路由的變化柳譬，并提供push函數(shù)，該函數(shù)將在點擊link組件時調(diào)用
完成路由跳轉(zhuǎn)邏輯
? ? router-link作為root的子組件续镇，能夠在執(zhí)行beforeCreate時查找到路由實例并掛載到自身美澳，同時在上一步我們也已經(jīng)將history實例掛載到了路由實例上，故這里只需要進(jìn)行路由組件匹配并跳轉(zhuǎn)即可
注冊視圖出口
? ? 同樣的摸航，使用vue.component進(jìn)行掛載
? ? ?由于視圖出口渲染的是當(dāng)前正在導(dǎo)航的路由制跟，因此我們需要在路由切換時將當(dāng)前激活路由保存一份，然后在渲染視圖出口時找到組件實例上的路由實例做掛載
? ? 現(xiàn)在還有一個比較棘手的問題酱虎，那就是當(dāng)路由變化時雨膨，怎么通知到視圖做更新呢?
? ? 我們知道，寫在data中的數(shù)據(jù)是響應(yīng)式的读串，當(dāng)其某個key改變后會觸發(fā)組件的更新聊记，如果能把路由對象作為data的某個key綁定到組件，并在視圖出口組件中去訪問一次收集到視圖組件的watcher恢暖，同時在路由改變時修改這個key排监。是不是就可以了呢？
? ? ? ? 如此一來社露，就只需要在視圖出口組件中進(jìn)行訪問以達(dá)到依賴收集的目的即可
beforeEach
? ? 作為閹割版，其實是很簡單的琼娘。只需要增加一個配置項峭弟，并在路由改變前做判斷，存在則調(diào)用脱拼，并把路由內(nèi)部的某個方法作為next參數(shù)傳遞即可
beforeCreate的bug
? ? 應(yīng)該是從this.$parent上取
實例化時使用結(jié)構(gòu)賦值取routes
視圖出口中訪問路由的代碼需要默認(rèn)為{}
