Das Implementierungsprinzip von Vue Router-View und Router-Link

<div id="app">
  <router-link to='home'>Zuhause</router-link>
  <router-link to='about'>Über</router-link>
  <Router-Ansicht a=1><Router-Ansicht/>
 </div>

Standard exportieren {
//Funktionale Komponenten haben dies nicht, können nicht neu sein und haben keine bidirektionale Datenbindung. Sie werden normalerweise weniger häufig verwendet und eignen sich besser zum Anzeigen von Detailseiten, da die Detailseiten nur anzeigen und keine Änderungen oder andere Vorgänge ausführen. Funktionale Komponenten sind leichter als zustandsbehaftete Komponenten.
  funktional:wahr,
  rendern(h,{Elternteil,Daten}){
  parent stellt die übergeordnete Komponenten-App dar
  Daten sind ein Inline-Attribut (a=1 im obigen Code) und können auch mit dem Prop let route = parent.$route; übergeben werden.
    lass Tiefe = 0;
    : Dieser Parameter gibt an, dass der Router eine bestimmte Größe hat, die für die Verbindung mit dem Router verwendet werden soll.
    während(Elternteil){ 
    //$vnode bezieht sich auf den virtuellen Dom. Wenn es einen virtuellen Dom in der App gibt und die Routeransicht auf diesem virtuellen Dom wahr ist
      wenn (übergeordnet.$vnode && übergeordnete.$vnode.data.routerView){
        Tiefe++; 
      }
      Elternteil = Elternteil.$Elternteil;
    }
    let record = route.matched[Tiefe];
    wenn(!Aufzeichnung){
      gibt h() zurück;
    }
    return h(Datensatz.Komponente, Daten);
  }
}

Standard exportieren {
  Requisiten:{
    Zu:{
      Typ: Zeichenfolge,
      erforderlich: wahr
    },
    Etikett:{
      Typ: Zeichenfolge
    }
  },
  rendern(h){
    let tag = dieses.tag || 'a';
    let-Handler = ()=>{
      dies.$router.push(dies.zu);
    }
    return <tag onClick={handler}>{this.$slots.default}</tag>
  }
}