vue手寫(xiě)<RouterLink/>組件實(shí)現(xiàn)demo詳解
手寫(xiě)<RouterLink/>組件
上一節(jié) 手寫(xiě)<RouterView/>組件
如果使用a標(biāo)簽改變頁(yè)面會(huì)重新發(fā)起請(qǐng)求，但是我們點(diǎn)擊<RouterLink/>的時(shí)候不會(huì)。以下手把手實(shí)現(xiàn)一個(gè)簡(jiǎn)單的<RouterLink/>組件。這節(jié)內(nèi)容與手寫(xiě)<RouterView/>組件（上一節(jié)內(nèi)容）有一定的聯(lián)系，建議先看一下。
1、加上一個(gè)響應(yīng)式數(shù)據(jù)
在上一節(jié)的基礎(chǔ)上加上一個(gè)響應(yīng)式數(shù)據(jù)（把獲取當(dāng)前路徑寫(xiě)在了這里）。
import?About?from?'../view/About.vue'
import?Home?from?'../view/Home.vue'
import?{ref}?from?'vue'
export?default?[
????{
????????path:?'/',
????????component:?Home
????},
????{
????????path:?'/about',
????????component:?About
????}
]
//?新加內(nèi)容
export?const?path?=?ref(window.location.pathname)2、對(duì)<RouterView/>組件進(jìn)行簡(jiǎn)單的改造
<template>
????<div>
????????<component?:is="view"></component>
????</div>
</template>
<script?setup>
import?{?computed?}?from?'vue'
import?Router?from?'../Router';
//?引入path這個(gè)響應(yīng)式數(shù)據(jù)
import?{?path?}?from?'../Router';
const?view?=?computed(()?=>?{
??//?這里直接使用的path
???const?res?=?Router.find(item?=>?item.path?==?path.value)
???return?res.component
})
</script>
<style?lang="scss"?scoped>
</style>3、創(chuàng)建<RouterLink/>組件
內(nèi)容如下：
@click.prevent阻止a標(biāo)簽的默認(rèn)行為，讓其被點(diǎn)擊時(shí)執(zhí)行push函數(shù)。push函數(shù)里執(zhí)行的就是改變path為要加載的頁(yè)面路徑。
<template>
????<div>
????????<a?:href="to" rel="external nofollow" ?@click.prevent="push">
????????????<slot></slot>
????????</a>
????</div>
</template>
<script?setup>
import?{?path?}?from?'../Router';
const?props?=?defineProps({
????to:?{type:?String,?required:?true}
})
const?push?=?()?=>?{
????path.value?=?props.to
}
</script>4、在App.vue中使用
當(dāng)你點(diǎn)擊時(shí)不會(huì)重新請(qǐng)求。
<RouterLink?:to="'/'">首頁(yè)</RouterLink> <RouterLink?:to="'/about'">關(guān)于</RouterLink> <RouterView></RouterView>
以上就是vue手寫(xiě)RouterLink組件實(shí)現(xiàn)demo詳解的詳細(xì)內(nèi)容，更多關(guān)于vue手寫(xiě)RouterLink組件的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了使用Vue3封裝一個(gè)通用echarts組件詳解的相關(guān)知識(shí),文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-02-02
vue3使用pdf.js來(lái)預(yù)覽文件的操作步驟(本地文件測(cè)試)
這篇文章主要介紹了vue3使用pdf.js來(lái)預(yù)覽文件的操作步驟(本地文件測(cè)試),文中通過(guò)代碼示例和圖文結(jié)合的方式給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-05-05
Vue實(shí)現(xiàn)簡(jiǎn)單分頁(yè)器
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)簡(jiǎn)單分頁(yè)器，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-12-12
vue實(shí)現(xiàn)簡(jiǎn)單轉(zhuǎn)盤(pán)抽獎(jiǎng)功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)簡(jiǎn)單轉(zhuǎn)盤(pán)抽獎(jiǎng)功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
在開(kāi)發(fā)后臺(tái)管理系統(tǒng)的時(shí)候,很多地方都要用到導(dǎo)出excel 表格,比如將table中的數(shù)據(jù)導(dǎo)出到本地,這篇文章主要給大家介紹了關(guān)于Vue導(dǎo)出Excel功能的相關(guān)資料,需要的朋友可以參考下2021-07-07
Vue中的數(shù)據(jù)監(jiān)聽(tīng)和數(shù)據(jù)交互案例解析
這篇文章主要介紹了Vue中的數(shù)據(jù)監(jiān)聽(tīng)和數(shù)據(jù)交互案例解析,在文章開(kāi)頭部分先給大家介紹了vue中的數(shù)據(jù)監(jiān)聽(tīng)事件$watch，具體代碼講解，大家可以參考下本文2017-07-07
vue.js+elementUI實(shí)現(xiàn)點(diǎn)擊左右箭頭切換頭像功能（類似輪播圖效果）
這篇文章主要介紹了vue.js+elementUI實(shí)現(xiàn)點(diǎn)擊左右箭頭切換頭像功能（類似輪播圖），本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-09-09
這篇文章主要介紹了關(guān)于element中表格和表單的封裝方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
Electron采集桌面共享和系統(tǒng)音頻(桌面捕獲)實(shí)例
這篇文章主要為大家介紹了Electron采集桌面共享和系統(tǒng)音頻(桌面捕獲)實(shí)現(xiàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-10-10
這篇文章主要介紹了vue中倒計(jì)時(shí)組件的實(shí)例代碼,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-07-07