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