前言

好了經過上一篇的學習，我們已經知道了如何監聽 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，然后運行項目，打開控制臺，我們可以看到我們的路由信息已經被提取出來了。

最后

總結

以上是生活随笔為你收集整理的手撕Vue-Router-提取路由信息的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。