Vue router-viewとrouter-linkの実装原理

<div id="アプリ">
  <router-link to='home'>ホーム</router-link>
  <router-link to='about'>について</router-link>
  <ルータービュー a=1><ルータービュー/>
 </div>

エクスポートデフォルト{
// 機能コンポーネントにはこれがなく、新規作成できず、双方向データ バインディングもありません。通常、機能コンポーネントはそれほど頻繁には使用されず、詳細ページは表示のみで変更や他の操作は実行されないため、詳細ページの表示に適しています。機能コンポーネントは、ステートフル コンポーネントよりも軽量です。
  機能:true、
  レンダリング(h,{親,データ}){
  親は親コンポーネントアプリを表します
  data はインライン属性 (上記のコードでは a=1) であり、prop let route = parent.$route; を使用して渡すこともできます。
    深さを 0 にします。
    ルータービューを true に設定します。
    while(親){ 
    //$vnodeは仮想DOMを参照します。アプリに仮想DOMがあり、この仮想DOMのrouterViewがtrueの場合
      親.$vnode && 親.$vnode.data.routerView の場合{
        深さ++; 
      }
      親 = 親.$parent;
    }
    レコードをルート.matched[depth]とします。
    if(!記録){
      h() を返します。
    }
    h(record.component, data) を返します。
  }
}

エクスポートデフォルト{
  小道具:{
    に：{
      タイプ:文字列、
      必須:true
    },
    タグ：{
      タイプ:文字列
    }
  },
  レンダリング(h){
    tag = this.tag || 'a' とします。
    ハンドラを = ()=>{
      this.$router.push(this.to);
    }
    <tag onClick={handler}>{this.$slots.default}</tag> を返します。
  }
}