前言

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

簡(jiǎn)而言之就是給每一個(gè)Vue實(shí)例添加一個(gè)$router屬性，這個(gè)屬性就是我們?cè)谏弦黄恼轮袆?chuàng)建的VueRouter實(shí)例。

實(shí)現(xiàn)思路

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

在我們實(shí)現(xiàn)的 NueRouter 時(shí)，我們通過(guò) Vue.use 來(lái)安裝好我們的路由插件，那么在編寫(xiě)插件中有一個(gè) install 方法，這個(gè)方法會(huì)在 Vue.use 時(shí)被調(diào)用，我們可以在這個(gè)方法中將 VueRouter 實(shí)例掛載到 Vue 實(shí)例上。

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

重寫(xiě) beforeCreate 方法，將 VueRouter 實(shí)例掛載到 Vue 實(shí)例上。在 beforeCreate 方法中，我們可以通過(guò) this.$options.router 獲取到我們?cè)?new Vue 時(shí)傳入的 router 對(duì)象，然后將這個(gè)對(duì)象掛載到 Vue 實(shí)例上。如果通過(guò) this.$options.router 獲取到了 router 對(duì)象，那么就說(shuō)明這個(gè) Vue 實(shí)例是根實(shí)例，我們就可以將 router 對(duì)象掛載到 Vue 實(shí)例上了。

如果獲取不到 router 對(duì)象，那么就說(shuō)明這個(gè) Vue 實(shí)例不是根實(shí)例，我們就需要將父組件的 router 對(duì)象掛載到 Vue 實(shí)例上。

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

代碼實(shí)現(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;
            }
        }
    })
}

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

測(cè)試

接下來(lái)就是我們平時(shí)要進(jìn)行的測(cè)試了，分別在各個(gè)組件當(dāng)中打印一下 $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);
}

最后我們來(lái)看一下效果：

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

最后

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

總結(jié)

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

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