使用www.cppcns.com

<div id="app">
  <router-link to='home'>首頁</router-link>
  <router-link to='about'>關於</router-link程式設計客棧>
  <router-view a=1><router-view/>
 </div>

router-view元件

export default {
//函式式元件沒有this 不能new 沒http://www.cppcns.com有雙向資料繫結，通常用的比較少，比較適用於展示詳情頁因為詳情頁只展示不進行修改等操作，函式式元件比有狀態的元件更加輕量級。
  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上的rout
 
程式設計客棧erView為true
      if (parent.$vnode && parent.$vnode.data.routerView){
        depth++; 
      }
      parent = parent.$parent;
    }
    let record = route.matched[depth];
    if(!record){
      return h();
    }
    retuwww.cppcns.comrn h(record.component,data);
  }
}

router-link的實現

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>
  }
}

到此這篇關於vue router-view和router-link的實現原理的文章就介紹到這了,更多相關Vue router-view和router-link內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！