vue手寫<RouterLink/>組件實(shí)現(xiàn)demo詳解
更新時間：2023年06月16日 09:34:09 作者：XiaoSong
這篇文章主要為大家介紹了vue手寫<RouterLink/>組件實(shí)現(xiàn)demo詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
手寫<RouterLink/>組件
上一節(jié) 手寫<RouterView/>組件
如果使用a標(biāo)簽改變頁面會重新發(fā)起請求，但是我們點(diǎn)擊<RouterLink/>的時候不會。以下手把手實(shí)現(xiàn)一個簡單的<RouterLink/>組件。這節(jié)內(nèi)容與手寫<RouterView/>組件（上一節(jié)內(nèi)容）有一定的聯(lián)系，建議先看一下。
1、加上一個響應(yīng)式數(shù)據(jù)
在上一節(jié)的基礎(chǔ)上加上一個響應(yīng)式數(shù)據(jù)（把獲取當(dāng)前路徑寫在了這里）。
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、對<RouterView/>組件進(jìn)行簡單的改造
<template>
????<div>
????????<component?:is="view"></component>
????</div>
</template>
<script?setup>
import?{?computed?}?from?'vue'
import?Router?from?'../Router';
//?引入path這個響應(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)擊時執(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中使用
當(dāng)你點(diǎn)擊時不會重新請求。
<RouterLink?:to="'/'">首頁</RouterLink> <RouterLink?:to="'/about'">關(guān)于</RouterLink> <RouterView></RouterView>
以上就是vue手寫RouterLink組件實(shí)現(xiàn)demo詳解的詳細(xì)內(nèi)容，更多關(guān)于vue手寫RouterLink組件的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了Vue封裝功能組件，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
解決vue中監(jiān)聽input只能輸入數(shù)字及英文或者其他情況的問題
今天小編就為大家分享一篇解決vue中監(jiān)聽input只能輸入數(shù)字及英文或者其他情況的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
vite項(xiàng)目配置less全局樣式的實(shí)現(xiàn)步驟
最近想實(shí)現(xiàn)個項(xiàng)目,需要配置全局less,本文主要介紹了vite項(xiàng)目配置less全局樣式的實(shí)現(xiàn)步驟,文中通過示例代碼介紹的非常詳細(xì),需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-02-02
這篇文章主要介紹了vue-router路由懶加載和權(quán)限控制的相關(guān)資料2017-12-12
Vue項(xiàng)目中使用Sass的完整指南(方案解析)
本文詳細(xì)介紹了在Vue項(xiàng)目中集成Sass的步驟和技巧,包括安裝依賴、基本使用、不同構(gòu)建工具的配置、全局變量和混入的配置,以及項(xiàng)目結(jié)構(gòu)建議和常見問題解決方案,特別強(qiáng)調(diào)了Vue3+Vite項(xiàng)目中使用Sass的便捷性,感興趣的朋友跟隨小編一起看看吧2026-01-01
這篇文章主要介紹了解決nuxt 自定義全局方法,全局屬性,全局變量的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
Vue2項(xiàng)目如何使用pdfjs-dist解析pdf
這篇文章主要為大家詳細(xì)介紹了Vue2項(xiàng)目如何使用pdfjs-dist解析pdf相關(guān),文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2025-05-05
Vue API中setup ref reactive函數(shù)使用教程
setup是用來寫組合式api，內(nèi)部的數(shù)據(jù)和方法需要通過return之后，模板才能使用。在之前vue2中，data返回的數(shù)據(jù)，可以直接進(jìn)行雙向綁定使用，如果我們把setup中數(shù)據(jù)類型直接雙向綁定，發(fā)現(xiàn)變量并不能實(shí)時響應(yīng)。接下來就詳細(xì)看看它們的使用2022-12-12
如何實(shí)現(xiàn)一個簡易版的vuex持久化工具
這篇文章主要介紹了實(shí)現(xiàn)一個簡易版的vuex持久化工具，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
本篇文章主要介紹了vue調(diào)用高德地圖實(shí)例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-04-04