Angular+RouterLink macht verschiedene ausgefallene Sprünge

Dieses Mal bringe ich Ihnen Angular+RouterLink, um verschiedene ausgefallene Sprünge zu machen. Das Folgende ist ein praktischer Fall Zeit.

VorwortZusätzlich zur Verwendung der navigation()-Methode des Routers zum Wechseln von Routen bietet Angular2 auch einen Befehl zum Konvertieren eines

DOM Das Objekt

wird als Routing-Eintrag erweitert: Die

@View({
directives:[RouterOutlet,RouterLink]
template : `<nav>
<b router-link="video">video</b> | 
<b router-link="music">music</b>
</nav>
<router-outlet></router-outlet>`
})

RouterLink-Direktive fügt dem Host-DOM-Objekt einen Click

-Ereignis

-Listener hinzu und ruft bei Auslösung die navigation()-Methode des Routers für das Routing auf . In diesem Artikel werden jedoch hauptsächlich die relevanten Inhalte zu Angulars RouterLink Fancy Jump vorgestellt. Ich werde im Folgenden nicht viel sagen.

routerLink selbst unterstützt zwei Schreibmethoden:

<a routerLink="detail">
</a>
<a [routerLink]="[&#39;detail&#39;]">
</a>

Welche Schreibmethoden gibt es für den Wert von routerLink und was sind die Unterschiede?

Angenommen, die aktuelle Route ist

`http://localhost:4200/#/doc/license`

Schreiben 1: Absoluter Pfad / + Routenname

 <!--跳到 http://localhost:4200/#/doc/license -->
 <a [routerLink]="[&#39;/doc/demo&#39;]" >跳呀跳</a>
 
 <!--跳到 http://localhost:4200/#/demo -->
 <a [routerLink]="[&#39;/demo&#39;]" >跳呀跳</a>

Dann ist die URL

http: Springe zu //localhost:4200/#/doc/demo, also http://localhost:4200/#/ + der absolute Pfad, zu dem du springen möchtest.

Schreiben 2: Ein Routing-Name Routing-Name

 <a [routerLink]="[&#39;demo&#39;]" >跳呀跳</a>

Dann ist die URL http://localhost:4200/#/doc/license/(demo), was ist http://localhost:4200/#/doc/license + der absolute Pfad, zu dem Sie springen möchten. Zu diesem Zeitpunkt wird Ihrer Route etwas hinzugefügt, das zu /(demo) wird, und der Sprung funktioniert nicht.

Schreiben 3: relativer Pfad../Routenname

 <a [routerLink]="[&#39;../demo&#39;]" >跳呀跳</a>

Dann ist die URL

http://localhost:4200/#/doc /demo, das ist http://localhost:4200/#/doc + der relative Pfad, zu dem Sie springen möchten. Es beginnt mit der Betrachtung der vorherigen Ebene.

Schreibmethode 4: ./Routenname, also die aktuelle Route + die Route, zu der Sie springen möchten

 <a [routerLink]="[&#39;./demo&#39;]" >跳呀跳</a>

Ich glaube, Sie haben die Methode danach gemeistert Lesen Sie den Fall in diesem Artikel. Weitere spannende Inhalte finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erläuterung der Schritte zur Implementierung der Schneeflocken-Fallanimation in JS

So implementieren Sie den Port Wiederverwendungsfunktion in Node.Js

Das obige ist der detaillierte Inhalt vonAngular+RouterLink macht verschiedene ausgefallene Sprünge. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!