前言
好了經過上一篇的學習，我們已經知道了如何監聽 Hash 的變化，如何監聽路徑的一個變化，本篇我們就可以來實現我們自己的 VueRouter 了, 那麼怎麼實現呢，在實現之前我們先來回顧一下官方的 VueRouter 是怎麼使用的。
VueRouter 的使用
首先需要去下載官方的 VueRouter，如果是透過 npm 的方式就可以透過 npm install vue-router 來進行安裝，如果是透過 script 的方式引入的話，可以透過 cdn 的方式來進行引入，然後我們就可以在 Vue 的例項中進行使用了。
如上這是第一步，第二呢就是註冊我們的 VueRouter，透過 Vue.use(VueRouter) 來進行註冊，然後我們就可以在 Vue 的例項中進行使用了。
透過觀察 VueRouter 是透過，Vue.use 進行註冊的，所以 VueRouter 是一個外掛，所以說編寫 VueRouter 就是在編寫一個外掛。
好，那麼我現在就新建一個 Nue-Router.js 檔案，然後我們就可以開始編寫我們的 VueRouter 了。
緊接著我在檔案內部搭建了一個外掛的基本結構，程式碼如下：
class NueRouter {
}
NueRouter.install = (Vue, options) => {
}
export default NueRouter;
搭建好了之後我們來看看怎麼使用的，我透過觀察官方的 VueRouter 的使用發現，是透過 new VueRouter({}) 的方式來進行使用的，在建立的時候給他傳遞了引數，所以說我們需要在 NueRouter 的建構函式中接收這個引數, 那麼外界傳遞了什麼引數給我們呢，透過觀察官方的示例，可以得知傳遞了一個 mode 的引數，這個引數是用來指定路由的模式的，是 hash 還是 history，所以說我們需要在 NueRouter 的建構函式中接收這個引數，還傳遞了一個使用者配置了路由的 routes 引數，所以說我們也需要在 NueRouter 的建構函式中接收這個引數，那麼我們就可以在 NueRouter 的建構函式中接收這兩個引數了，程式碼如下：
class NueRouter {
constructor(options) {
this.mode = options.mode || 'hash';
this.routes = options.routes || [];
}
}
儲存好了這些資訊之後還沒完，為了後續我們方便去處理 routes 的資訊，我需要改造一下，改造成什麼樣子呢，就是將之前的路由地址改造為 key, 元件是我們的一個 value，那麼這樣子的話我們將來就可以透過 key(路由地址) 去獲取到我們的元件了，然後直接將我們獲取到的元件渲染到 router-view 中就可以了。
所以最終我要改造的資料結構如下：
{
'/home': Home,
'/about': About
}
那麼我們怎麼去改造呢，我們可以透過遍歷 routes，然後將每一項的 path 作為 key，component 作為 value，組裝一個全新的物件將全新的物件陣列進行儲存到 NueRouter 的 routes 中，程式碼如下：
createRoutesMap() {
return this.routes.reduce((map, route) => {
map[route.path] = route.component;
return map;
}, {});
}
測試
好了，我們現在已經將我們的路由資訊提取出來了，那麼我們就可以進行測試了，我們將官方的 VueRouter 替換成我們自己的 NueRouter，然後執行專案，開啟控制檯，我們可以看到我們的路由資訊已經被提取出來了。
最後
