Vue router-view和router-link的實現(xiàn)原理
更新時間：2021年03月09日 09:24:24 作者：mengyuhang4879
這篇文章主要介紹了Vue router-view和router-link的實現(xiàn)原理，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
使用
<div id="app"> <router-link to='home'>首頁</router-link> <router-link to='about'>關(guān)于</router-link> <router-view a=1><router-view/> </div>
router-view組件
export default {
//函數(shù)式組件沒有this 不能new 沒有雙向數(shù)據(jù)綁定，通常用的比較少，比較適用于展示詳情頁因為詳情頁只展示不進(jìn)行修改等操作，函數(shù)式組件比有狀態(tài)的組件更加輕量級。
functional:true,
render(h,{parent,data}){
parent表示的父組件 app
data 是行間屬性(上面代碼a=1) 也可以使用prop傳遞
let route = parent.$route;
let depth = 0;
data.routerView = true;
while(parent){
//$vnode指的是虛擬dom 如果app上有虛擬dom并且這個虛擬dom上的routerView為true
if (parent.$vnode && parent.$vnode.data.routerView){
depth++;
}
parent = parent.$parent;
}
let record = route.matched[depth];
if(!record){
return h();
}
return h(record.component, data);
}
}
router-link的實現(xiàn)
export default {
props:{
to:{
type:String,
required:true
},
tag:{
type:String
}
},
render(h){
let tag = this.tag || 'a';
let handler = ()=>{
this.$router.push(this.to);
}
return <tag onClick={handler}>{this.$slots.default}</tag>
}
}
到此這篇關(guān)于Vue router-view和router-link的實現(xiàn)原理的文章就介紹到這了,更多相關(guān)Vue router-view和router-link內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
文章介紹了一個Vue組件,該組件允許用戶通過鼠標(biāo)右鍵在畫布上繪制矩形,并且支持通過Ctrl鍵進(jìn)行多選,文章附帶了組件代碼和一個示例,建議讀者將代碼復(fù)制到自己的開發(fā)環(huán)境中進(jìn)行調(diào)試2024-12-12
這篇文章主要為大家詳細(xì)介紹了Vue實現(xiàn)簡單購物車小案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
vue.js樣式布局Flutter業(yè)務(wù)開發(fā)常用技巧
這篇文章主要為大家介紹了vue.js樣式布局Flutter業(yè)務(wù)開發(fā)中的常用技巧，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步早日升職加薪2021-11-11
這篇文章主要介紹了vue?遮罩和ref的使用，setup版和非setup版,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-03-03
Vue3中reactive變量重新賦值無法響應(yīng)的3種處理方法
這篇文章主要給大家介紹了關(guān)于Vue3中reactive變量重新賦值無法響應(yīng)的3種處理方法,在Vue3中可以使用reactive函數(shù)將一個普通對象轉(zhuǎn)換為響應(yīng)式對象,需要的朋友可以參考下2023-08-08
vue 使用moment獲取當(dāng)前時間及一月前的時間
開發(fā)中會有要獲取當(dāng)前日期的需求,有的是獲取到當(dāng)前月份,本文就介紹了vue獲取當(dāng)前日期時間(moment、new?Date()),文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2023-08-08
這篇文章主要介紹了Vue3中如何通過v-model實現(xiàn)父子組件的雙向數(shù)據(jù)綁定及利用computed簡化父子組件雙向綁定,本文結(jié)合示例代碼給大家講解的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-12-12
這篇文章主要為大家介紹了petite?vue的使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
淺談Vue使用Elementui修改默認(rèn)的最快方法
這篇文章主要介紹了淺談Vue使用Elementui修改默認(rèn)的最快方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-12-12
這篇文章主要介紹了vue自定義上傳頭像組件功能,介紹了與一般上傳組件的區(qū)別,通過實例代碼介紹了上傳圖片組件的方法,需要的朋友可以參考下2024-01-01