前言

經(jīng)過上一篇文章的介紹，完成了初始化路由相關信息的內容，接下來我們需要將路由信息掛載到Vue實例上，這樣我們就可以在Vue實例中使用路由信息了。

簡而言之就是給每一個Vue實例添加一個$router屬性，這個屬性就是我們在上一篇文章中創(chuàng)建的VueRouter實例。

實現(xiàn)思路

我們需要在Vue實例創(chuàng)建之前，將VueRouter實例掛載到Vue實例上，這樣我們就可以在Vue實例中使用$router屬性了。

在我們實現(xiàn)的 NueRouter 時，我們通過 Vue.use 來安裝好我們的路由插件，那么在編寫插件中有一個 install 方法，這個方法會在 Vue.use 時被調用，我們可以在這個方法中將 VueRouter 實例掛載到 Vue 實例上。

在 Vue 中有一個 mixin 方法，這個方法會在每個組件創(chuàng)建之前被調用，我們可以在這個方法中將 VueRouter 實例掛載到 Vue 實例上。

重寫 beforeCreate 方法，將 VueRouter 實例掛載到 Vue 實例上。在 beforeCreate 方法中，我們可以通過 this.$options.router 獲取到我們在 new Vue 時傳入的 router 對象，然后將這個對象掛載到 Vue 實例上。如果通過 this.$options.router 獲取到了 router 對象，那么就說明這個 Vue 實例是根實例，我們就可以將 router 對象掛載到 Vue 實例上了。

如果獲取不到 router 對象，那么就說明這個 Vue 實例不是根實例，我們就需要將父組件的 router 對象掛載到 Vue 實例上。

大致思路就是這樣，接下來我們來實現(xiàn)一下。

代碼實現(xiàn)

NueRouter.install = (Vue, options) => {
    Vue.mixin({
        beforeCreate() {
            if (this.$options && this.$options.router) {
                this.$router = this.$options.router;
                this.$route = this.$router.routerInfo;
            } else {
                this.$router = this.$parent.$router;
                this.$route = this.$router.routerInfo;
            }
        }
    })
}

如上的代碼就是我們實現(xiàn)的思路，我們通過 this.$options.router 獲取到我們在 new Vue 時傳入的 router 對象，然后將這個對象掛載到 Vue 實例上。如果獲取不到 router 對象，那么就說明這個 Vue 實例不是根實例，我們就需要將父組件的 router 對象掛載到 Vue 實例上。

測試

接下來就是我們平時要進行的測試了，分別在各個組件當中打印一下 $router 和 $route 屬性，看看是否掛載成功。

App.vue:

mounted() {
    console.log("App", this.$router);
    console.log("App", this.$route);
}

Home.vue:

mounted() {
    console.log("Home", this.$router);
    console.log("Home", this.$route);
}

About.vue:

mounted() {
    console.log("About", this.$router);
    console.log("About", this.$route);
}

最后我們來看一下效果：

可以看到我們的路由信息已經(jīng)掛載到 Vue 實例上了。

最后

到這里我們就完成了將路由信息掛載到 Vue 實例上的功能，接下來下一篇文章我會帶著大家來實現(xiàn) 實現(xiàn)router-link。

總結

以上是生活随笔為你收集整理的手撕Vue-Router-添加全局$router属性的全部內容，希望文章能夠幫你解決所遇到的問題。

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