使用

<div id='app'> <router-link to=’home’>首頁(yè)</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ù)綁定，通常用的比較少，比較適用于展示詳情頁(yè)因?yàn)樵斍轫?yè)只展示不進(jìn)行修改等操作，函數(shù)式組件比有狀態(tài)的組件更加輕量級(jí)。 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并且這個(gè)虛擬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的實(shí)現(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的實(shí)現(xiàn)原理的文章就介紹到這了,更多相關(guān)Vue router-view和router-link內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！