前言

經(jīng)過上一篇文章的介紹，完成了初始化路由相關(guān)信息的內(nè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í)，我們通過 Vue.use 來安裝好我們的路由插件，那么在編寫插件中有一個(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í)例上。

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

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

大致思路就是這樣，接下來我們來實(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)的思路，我們通過 this.$options.router 獲取到我們?cè)?new Vue 時(shí)傳入的 router 對(duì)象，然后將這個(gè)對(duì)象掛載到 Vue 實(shí)例上。如果獲取不到 router 對(duì)象，那么就說明這個(gè) Vue 實(shí)例不是根實(shí)例，我們就需要將父組件的 router 對(duì)象掛載到 Vue 實(shí)例上。

測(cè)試

接下來就是我們平時(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);
}

最后我們來看一下效果：

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

最后

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

到此這篇關(guān)于Vue-Router-添加全局$router屬性的文章就介紹到這了,更多相關(guān)Vue Router $router屬性內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論