前言

在上一篇 [手撕Vue-Router-添加全局$router屬性] 中，實現了將每一個 Vue 實例上掛載一個 $router 屬性，這個屬性就是我們在上一篇文章中創建的 VueRouter 實例。

開始

本章節，我們將實現一個 router-link 組件，這個組件可以實現點擊跳轉到指定的路由。

實現思路

我們需要實現一個 router-link 組件，這個組件可以實現點擊跳轉到指定的路由。

實現 router-link 組件，我們需要注意以下幾點：

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

代碼實現

• 只要外界使用了Vue-Router, 那么我們就必須提供兩個自定義的組件給外界使用，一個是 router-link 組件，一個是 router-view 組件。首先本章節我們只實現 router-link 組件。
• 只要外界通過Vue.use注冊了Vue-Router, 就代表外界使用了Vue-Router
• 只要外界通過Vue.use注冊了Vue-Router, 就會調用插件的install方法
• 所以我們只需要在install方法中注冊兩個全局組件給外界使用即可

代碼如下：

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

    Vue.component('router-link', {

    });
}

好了到此為止，就完成了添加 router-link 組件，只是簡簡單單的添加了一個組件，還沒有實現跳轉的功能。

實現跳轉功能

通過觀察官方的 router-link 組件，我們可以發現，這個組件是一個 <a> 標簽，所以我們可以通過 <a> 標簽的 href 屬性來實現跳轉。

這么一來，在根據 Vue 官方文檔中介紹的組件注冊方式，我們可以在 component 中使用 render 函數來實現渲染 a 標簽。

a 標簽渲染完畢了但是跳轉的地址還沒有，還需要在 component 中添加一個 props 屬性，這個屬性就是我們要跳轉的地址。

總結：通過 render 函數渲染 a 標簽，通過 props 屬性傳遞跳轉地址。

代碼如下：

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

寫完發現，a 標簽渲染了，但是沒有內容，我們需要在 a 標簽中添加內容，這個內容就是我們在使用 router-link 組件時傳入的內容。

我們可以通過 this.$slots.default 來獲取到我們在使用 router-link 組件時傳入的內容。

代碼如下：

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

測試自己寫的 router-link 組件，發現可以改變了，發現還有一個問題，就是路由的 mode 為 hash 時，生成的 a 標簽的 href 屬性是 /#/xxx，如果 mode 為 history 時，生成的 a 標簽的 href 屬性是 /xxx, 這個問題我們還需要解決。

那么怎么獲取到路由的 mode 呢？我們可以通過 this.$router.mode 來獲取到路由的 mode。

這里有一個注意點：

render 方法中的 this 并不是當前實例對象, 而是一個代理對象, 如果我們想拿到當前實例對象，那么可以通過 this._self 獲取

知道了這些內容之后，我們就可以通過 this._self.$router.mode 來獲取到路由的 mode 了。根據路由的 mode 來判斷生成的 a 標簽的 href 屬性。

代碼如下：

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

測試一下，發現可以了。好了，到此為止，我們就完成了 router-link 組件的實現。

最后

大家好我是 BNTang, 一個熱愛分享的技術的開發者，如果大家覺得我的文章對你有幫助的話，可以關注我的公眾號 JavaBoyL，我會在公眾號中分享一些IT技術和一些個人的見解，謝謝大家的支持。

總結

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

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