Wissen Sie, welche Möglichkeiten es gibt, in Vue Routen zu überspringen?

Wissen Sie, welche Möglichkeiten es gibt, in Vue Routen zu überspringen?

Die erste Methode: Router-Link (deklaratives Routing)

1. Ohne Parameter <router-link :to="{name:'home'}"> 
<router-link :to="{path:'/home'}"> //entweder Name oder Pfad ist in Ordnung, Name wird empfohlen  
// Hinweis: Wenn der Link im Router-Link mit „/“ beginnt, startet er von der Stammroute. Wenn er nicht mit „/“ beginnt, startet er von der aktuellen Route.
2. Mit den Parametern <router-link :to="{name:'home', params: {id:1}}">  
// Parameter übergeben Parameter (ähnlich wie bei Post)
// Routing-Konfigurationspfad: "/home/:id" oder Pfad: "/home:id" 
// Wenn Sie den Pfad nicht konfigurieren, können Sie ihn beim ersten Mal anfordern, aber die ID verschwindet, wenn Sie die Seite aktualisieren. // Wenn Sie den Pfad konfigurieren, bleibt die ID erhalten, wenn Sie die Seite aktualisieren. // HTML verwendet den Parameter $route.params.id.
// Skript übernimmt den Parameter this.$route.params.id
<router-link :to="{name:'home', query: {id:1}}"> 

Die zweite Methode: router.push (programmgesteuertes Routing)

// Zeichenfolge router.push('home')
// Objekt router.push({ Pfad: 'home' })
// Benannte Routen router.push({ name: 'user', params: { userId: '123' }})
// Mit Abfrageparametern wird es zu /register?plan=private
router.push({ Pfad: 'registrieren', Abfrage: { Plan: 'privat' }})

Hinweis: Wenn ein Pfad angegeben ist, werden Parameter ignoriert, was bei der Abfrage im obigen Beispiel nicht der Fall ist. Stattdessen müssen Sie einen Routennamen angeben oder den vollständigen Pfad mit Parametern schreiben, wie im folgenden Beispiel gezeigt:

Konstante Benutzer-ID = "123"
router.push({ Name: 'Benutzer', Parameter: { Benutzer-ID }}) // -> /Benutzer/123
router.push({ Pfad: `/Benutzer/${Benutzer-ID}` }) // -> /Benutzer/123
// Die Parameter hier sind nicht wirksam router.push({ path: '/user', params: { userId }}) // -> /user

Der dritte Weg: this.$router.push() (Aufruf in der Funktion)

1. ohne Parameter this.$router.push('/home')
dies.$router.push({name:'home'})
dies.$router.push({Pfad:'/home'})
2. Abfrageparameter this.$router.push({name:'home',query: {id:'1'}})
dies.$router.push({Pfad:'/home',Abfrage: {id:'1'}})
// html übernimmt den Parameter $route.query.id
// Skript übernimmt den Parameter this.$route.query.id
3. params-Parameter this.$router.push({name:'home',params: {id:'1'}}) // Nur der Name kann verwendet werden
// Routing-Konfigurationspfad: "/home/:id" oder Pfad: "/home:id",
// Wenn Sie den Pfad nicht konfigurieren, können Sie ihn beim ersten Mal anfordern, aber die ID verschwindet, wenn Sie die Seite aktualisieren. // Wenn Sie den Pfad konfigurieren, bleibt die ID erhalten, wenn Sie die Seite aktualisieren. // HTML verwendet den Parameter $route.params.id.
// Skript übernimmt den Parameter this.$route.params.id
4. Der Unterschied zwischen Abfrage und Parametern. Abfrage ist ähnlich wie Abrufen. Nachdem die Seite umgeleitet wurde, werden die Parameter der URL hinzugefügt, ähnlich wie ?id=1. Auf diese Weise können nicht wichtige Parameter übergeben werden. Passwörter und dergleichen können weiterhin in Parametern übergeben werden. Die Aktualisierungsseiten-ID befindet sich weiterhin in Parametern. Ähnlich wie beim Posten werden die Parameter nach der Umleitung der Seite nicht der URL hinzugefügt, aber die Aktualisierungsseiten-ID verschwindet. **Hinweis: Um die Parameter auf der Route abzurufen, verwenden Sie $route, ohne r am Ende**

Die vierte Methode: this.$router.replace() (gleiche Verwendung wie oben, push)

Der fünfte Weg: this.$router.go(n)

dies.$router.go(n)
Springe n Seiten vorwärts oder rückwärts, n kann eine positive oder negative Ganzzahl sein. ps: Unterschied zu this.$router.push
Springen Sie zum angegebenen URL-Pfad und fügen Sie einen Datensatz zum Verlaufsstapel hinzu. Wenn Sie auf „Zurück“ klicken, kehren Sie zur vorherigen Seite this.$router.replace zurück.
Springen Sie zum angegebenen URL-Pfad, aber es wird kein Datensatz im Verlaufsstapel vorhanden sein. Wenn Sie auf Zurück klicken, springen Sie zur vorherigen Seite (d. h. die aktuelle Seite wird direkt ersetzt).
dies.$router.go(n)
Springe n Seiten vorwärts oder rückwärts, n kann eine positive oder negative Ganzzahl sein

Params ist Teil der Route und erforderlich. Die Abfrage ist der Parameter, der nach der URL angehängt wird. Es spielt keine Rolle, wenn keine Abfrage vorhanden ist.
Sobald Parameter in einer Route festgelegt sind, werden sie Teil der Route. Wenn die Route Parameter enthält, der Parameter jedoch bei der Umleitung nicht übergeben wird, schlägt die Umleitung fehl oder die Seite hat keinen Inhalt.

Sie können Parameter übergeben, auch wenn „params“ und „Query“ nicht festgelegt sind. Wenn „params“ jedoch nicht festgelegt ist, gehen die Parameter verloren, wenn die Seite aktualisiert oder zurückgegeben wird.

Beide können Parameter übergeben, was ist der Unterschied?

Der Abfrageparameter ist mit dem Pfad konfiguriert, während der Parameterparameter mit dem Namen konfiguriert ist. Die Konfiguration des Pfads in den Parametern ist ungültig.

Die Abfrage muss keine Parameter in der Routing-Konfiguration festlegen, aber die Parameter müssen festgelegt werden

Die von der Abfrage übergebenen Parameter werden in der Adressleiste angezeigt

Die Aktualisierung der Parameter ist ungültig, aber die Abfrage speichert den übergebenen Wert und bleibt nach der Aktualisierung unverändert

siehe:

https://www.jb51.net/article/183611.htm

Offizielle Website von vue.js

Zusammenfassen

Dieser Artikel endet hier. Ich hoffe, er kann Ihnen helfen. Ich hoffe auch, dass Sie mehr Inhalt auf 123WORDPRESS.COM lesen können!

Das könnte Sie auch interessieren:
  • Implementierung eines verschachtelten Sprungs der Vue-Routing-Ansicht Router-Ansicht
  • Vue-Routing - Methode zum Sprung relativer Pfade
  • Lösung für das Vue-Routing: Diese Seite mit dem Sprung „this.route.push“ wird nicht aktualisiert
  • Das Routing in Vue wird nicht in Verlaufsvorgängen gezählt.
  • Vue: Gleiche Route springen, erzwungene Aktualisierung der Routenkomponentenoperation

<<:  Detaillierte Erklärung des Unterschieds zwischen in und exists in MySQL

>>:  So klicken Sie auf das A-Tag, um das Dialogfeld zum Hochladen der Eingabedatei zu öffnen

Artikel empfehlen

JS realisiert den automatischen Wiedergabeeffekt von Bildern

In diesem Artikel wird der spezifische Code von J...

Detaillierte Erklärung der Vue-Filter

<Text> <div id="Wurzel"> &l...

Hinweise zum virtuellen Dateisystem des Linux-Kernel-Gerätetreibers

/******************** * Virtuelles Dateisystem VF...

Vue erzielt einen nahtlosen Karusselleffekt

In diesem Artikel wird der spezifische Code von V...

MySQL verwendet SQL-Anweisungen zum Ändern von Tabellennamen

In MySQL können Sie die SQL-Anweisung „rename tab...

Eine kurze Analyse der asynchronen DOM-Aktualisierung von Vue

Inhaltsverzeichnis Das Prinzip der asynchronen DO...

So löschen Sie die Hintergrundfarbe des A-Tags, wenn in H5 darauf geklickt wird

1. Die blaue Farbe des Tags wird aufgehoben, wenn...

Analysieren der Knotenereignisschleife und der Nachrichtenwarteschlange

Inhaltsverzeichnis Was ist asynchron? Warum brauc...

Ausführliches Installationstutorial für MySQL Installer Community 5.7.16

Dieser Artikel zeichnet das ausführliche Tutorial...

W3C Tutorial (1): W3C verstehen

Das W3C, eine 1994 gegründete Organisation, zielt...

Einführung in die neuen Funktionen von MySQL 8.0.11

MySQL 8.0 für Windows v8.0.11 offizielle kostenlo...

Analyse der zum Ausführen von Docker erforderlichen Berechtigungen

Zum Ausführen von Docker sind Root-Rechte erforde...

Vollständiges Installationstutorial zum Ubuntu 16.04-Image unter VMware

In diesem Artikel finden Sie das Installations-Tu...