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

Detaillierte Erläuterung der Mybatis-Sonderzeichenverarbeitung

Vorwort: Mybatis-Sonderzeichenverarbeitung, Verar...

Docker-Image-Analysetool - Analyse des Tauchprinzips

Heute empfehle ich ein solches Open-Source-Tool z...

HTML + CSS + JS realisiert den Scroll-Gradienteneffekt der Navigationsleiste

Inhaltsverzeichnis Erster Blick auf die Wirkung: ...

Schritte zum Installieren einer RocketMQ-Instanz unter Linux

1. JDK installieren 1.1 Überprüfen Sie, ob die ak...

Detaillierte Erläuterung der Nginx-Statusüberwachung und Protokollanalyse

1. Nginx-Statusüberwachung Nginx bietet eine inte...

MySQL-Komplettabsturz: Detaillierte Erklärung der Abfragefilterbedingungen

Überblick In tatsächlichen Geschäftsszenarioanwen...

Farbverlauf für HTML-Hintergrund durch CSS erreicht

Screenshots der Effekte: Implementierungscode: Cod...

Detaillierte Erklärung des Fischschwarm-Algorithmus im CocosCreator-Spiel

Vorwort Ich wollte vor kurzem CocosCreator lernen...

Der Unterschied und die Einführung von ARGB, RGB und RGBA

ARGB ist ein Farbmodus, also der RGB-Farbmodus mi...

Detaillierte Erklärung der CSS3-Textschatteneigenschaft Textschatten

Textschatten-Textschatten-Eigenschaftseffekte: 1....

So implementieren Sie Zeilenumbrüche im Texteingabebereich von Textarea

Wenn Sie den Text im Textarea-Eingabebereich umbre...

Docker löscht private Bibliotheksbilder vollständig

Werfen wir zunächst einen Blick auf die allgemein...

jQuery implementiert Formularvalidierungsfunktion

Beispiel für die Validierung eines jQuery-Formula...