Vue-Routing - Methode zum Sprung relativer Pfade

Relativer Pfadsprung im Vue-Routing

Heute bin ich beim Schreiben auf mehrschichtiges Routing gestoßen. Beim Springen zwischen Routen ist ein relativer Pfad erforderlich. Daher habe ich die offizielle Website überprüft und festgestellt, dass das Append-Attribut und die Router.resolve-Methode verwendet wurden. Daher habe ich die spezifischen Verwendungsmethoden aufgelistet.

1. Attribut anhängen

Wenn das Append-Attribut gesetzt ist, wird der Basispfad vor dem aktuellen (relativen) Pfad hinzugefügt.

Typ: Boolescher Wert

Standardwert: false

• Beispielsweise navigieren wir von /eth (Basispfad) zu einem relativen Pfad /eth/block, /eth—>/eth/block, und die Route ist auf Block eingestellt
• Wenn das Append-Attribut hinzugefügt wird, lautet der vollständige Pfad /eth/block.
• Wenn nicht, lautet der vollständige Pfad /block

Wenn die aktuelle Route /eth ist, springen Sie zum untergeordneten Block /eth/

<router-link to="block" anhängen> 
 /eth =====> /eth/block  
</Router-Link>

Wenn die aktuelle Route /eth/login ist, springen Sie zur gleichen Ebene /eth/block

<router-link to="../block" anhängen>
 /eth/Anmeldung =====> /eth/Block 
</Router-Link>

Wenn die aktuelle Route /eth/block ist, kehren Sie zur vorherigen Ebene /eth zurück

<router-link to="../" anhängen>
 /eth/block =====> /eth 
</Router-Link>

2.router.resolve-Methode

router.resolve(Standort, aktuell?, anhängen?)

Rückgabewert: Routenobjekt

• Der aufgelöste Zielort (dasselbe Format wie von <Router-Link> zur Eigenschaft).
• current ist die aktuelle Standardroute (normalerweise müssen Sie sie nicht ändern)
• Mit append können Sie Pfade an die aktuelle Route anhängen (ähnlich wie bei router-link)

Standard exportieren {
  montiert() {
    //Holen Sie sich das umzuleitende Routenobjekt let routeObj = this.$router.resolve({
        Weg: '../'
      },
      diese.$route,
      "anhängen"
    );
    //Routenobjekt drucken und anzeigen console.log(routeObj);
    //Routensprung this.$router.push({
      Pfad: routeObj.route.path,
      Abfrage: { //Übergeben Sie den Parameter „ID“ folgendermaßen: this.id 
   }
    });
  }
}

Vue Router dynamisches Routing Klick Sprung Pfad Adresse wiederholt anhängen

Beim Üben des Schreibens des dynamischen Routings für Vue-Router sind Probleme aufgetreten

Bei mehrmaligem Klicken werden in der Adressleiste immer wieder Duplikate hinzugefügt.

Nachdem ich den Code überprüft hatte, stellte ich fest, dass am Anfang des relativen Pfads auf der Seite ein „/“ fehlte. Wenn ich ihn hinzufüge, wird die Anzeige normal angezeigt.

wie folgt:

Das Obige ist meine persönliche Erfahrung. Ich hoffe, es kann Ihnen als Referenz dienen. Ich hoffe auch, dass Sie 123WORDPRESS.COM unterstützen werden.