手撕Vue-Router-实现router-link
前言
在上一篇 [手撕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)題。
- 上一篇: xv6:labs2 syscall
- 下一篇: 毕业设计-springboot+vue公