前言

在上一篇 [手撕Vue-Router-添加全局$router屬性] 中，實(shí)現(xiàn)了將每一個(gè) Vue 實(shí)例上掛載一個(gè) $router 屬性，這個(gè)屬性就是我們?cè)谏弦黄恼轮袆?chuàng)建的 VueRouter 實(shí)例。

開(kāi)始

本章節(jié)，我們將實(shí)現(xiàn)一個(gè) router-link 組件，這個(gè)組件可以實(shí)現(xiàn)點(diǎn)擊跳轉(zhuǎn)到指定的路由。

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

我們需要實(shí)現(xiàn)一個(gè) router-link 組件，這個(gè)組件可以實(shí)現(xiàn)點(diǎn)擊跳轉(zhuǎn)到指定的路由。

實(shí)現(xiàn) router-link 組件，我們需要注意以下幾點(diǎn)：

• 只要外界使用了Vue-Router, 那么我們就必須提供兩個(gè)自定義的組件給外界使用，一個(gè)是 router-link 組件，一個(gè)是 router-view 組件。
• 只要外界通過(guò)Vue.use注冊(cè)了Vue-Router, 就代表外界使用了Vue-Router
• 只要外界通過(guò)Vue.use注冊(cè)了Vue-Router, 就會(huì)調(diào)用插件的install方法
• 所以我們只需要在install方法中注冊(cè)兩個(gè)全局組件給外界使用即可

代碼實(shí)現(xiàn)

• 只要外界使用了Vue-Router, 那么我們就必須提供兩個(gè)自定義的組件給外界使用，一個(gè)是 router-link 組件，一個(gè)是 router-view 組件。首先本章節(jié)我們只實(shí)現(xiàn) router-link 組件。
• 只要外界通過(guò)Vue.use注冊(cè)了Vue-Router, 就代表外界使用了Vue-Router
• 只要外界通過(guò)Vue.use注冊(cè)了Vue-Router, 就會(huì)調(diào)用插件的install方法
• 所以我們只需要在install方法中注冊(cè)兩個(gè)全局組件給外界使用即可

代碼如下：

NueRouter.install = (Vue, options) => {
    ...

    Vue.component('router-link', {

    });
}

好了到此為止，就完成了添加 router-link 組件，只是簡(jiǎn)簡(jiǎn)單單的添加了一個(gè)組件，還沒(méi)有實(shí)現(xiàn)跳轉(zhuǎn)的功能。

實(shí)現(xiàn)跳轉(zhuǎn)功能

通過(guò)觀察官方的 router-link 組件，我們可以發(fā)現(xiàn)，這個(gè)組件是一個(gè) <a> 標(biāo)簽，所以我們可以通過(guò) <a> 標(biāo)簽的 href 屬性來(lái)實(shí)現(xiàn)跳轉(zhuǎn)。

這么一來(lái)，在根據(jù) Vue 官方文檔中介紹的組件注冊(cè)方式，我們可以在 component 中使用 render 函數(shù)來(lái)實(shí)現(xiàn)渲染 a 標(biāo)簽。

a 標(biāo)簽渲染完畢了但是跳轉(zhuǎn)的地址還沒(méi)有，還需要在 component 中添加一個(gè) props 屬性，這個(gè)屬性就是我們要跳轉(zhuǎn)的地址。

總結(jié)：通過(guò) render 函數(shù)渲染 a 標(biāo)簽，通過(guò) props 屬性傳遞跳轉(zhuǎn)地址。

代碼如下：

Vue.component('router-link', {
    props: {
        to: {
            type: String,
        }
    },
    render() {
        return <a href={this.to}></a>
    }
});

寫(xiě)完發(fā)現(xiàn)，a 標(biāo)簽渲染了，但是沒(méi)有內(nèi)容，我們需要在 a 標(biāo)簽中添加內(nèi)容，這個(gè)內(nèi)容就是我們?cè)谑褂?router-link 組件時(shí)傳入的內(nèi)容。

我們可以通過(guò) this.$slots.default 來(lái)獲取到我們?cè)谑褂?router-link 組件時(shí)傳入的內(nèi)容。

代碼如下：

return <a href={this.to}>{this.$slots.default}</a>

測(cè)試自己寫(xiě)的 router-link 組件，發(fā)現(xiàn)可以改變了，發(fā)現(xiàn)還有一個(gè)問(wèn)題，就是路由的 mode 為 hash 時(shí)，生成的 a 標(biāo)簽的 href 屬性是 /#/xxx，如果 mode 為 history 時(shí)，生成的 a 標(biāo)簽的 href 屬性是 /xxx, 這個(gè)問(wèn)題我們還需要解決。

那么怎么獲取到路由的 mode 呢？我們可以通過(guò) this.$router.mode 來(lái)獲取到路由的 mode。

這里有一個(gè)注意點(diǎn)：

render 方法中的 this 并不是當(dāng)前實(shí)例對(duì)象, 而是一個(gè)代理對(duì)象, 如果我們想拿到當(dāng)前實(shí)例對(duì)象，那么可以通過(guò) this._self 獲取

知道了這些內(nèi)容之后，我們就可以通過(guò) this._self.$router.mode 來(lái)獲取到路由的 mode 了。根據(jù)路由的 mode 來(lái)判斷生成的 a 標(biāo)簽的 href 屬性。

代碼如下：

render() {
    let path = this.to;
    if (this._self.$router.mode === 'hash') {
        path = '#' + path;
    }
    return <a href={path}>{this.$slots.default}</a>
}

測(cè)試一下，發(fā)現(xiàn)可以了。好了，到此為止，我們就完成了 router-link 組件的實(shí)現(xiàn)。

最后

大家好我是 BNTang, 一個(gè)熱愛(ài)分享的技術(shù)的開(kāi)發(fā)者，如果大家覺(jué)得我的文章對(duì)你有幫助的話，可以關(guān)注我的公眾號(hào) JavaBoyL，我會(huì)在公眾號(hào)中分享一些IT技術(shù)和一些個(gè)人的見(jiàn)解，謝謝大家的支持。

總結(jié)

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

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