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

So installieren Sie das Modul „lua-nginx-module“ in Nginx

ngx_lua_module ist ein Nginx-HTTP-Modul, das den ...

Analyse des HTML-Schreibstils und Gründe erfahrener Leute

1. Navigation: Ungeordnete Liste vs. andere Besch...

So verwenden Sie den Linux-Befehl whatis

01. Befehlsübersicht Der Befehl whatis sucht in e...

Eine kurze Einführung in JavaScript-Arrays

Inhaltsverzeichnis Einführung in Arrays Array-Lit...

Realisierung des Karusselleffekts basierend auf jQuery

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

CSS+HTML zur Realisierung der Funktion der oberen Navigationsleiste

Implementierungseffektdiagramm für die Navigation...

Auszeichnungssprache - Anker

Zurück: Markup Language - Phrasenelemente Original...

Zwei Abfragemethoden, wenn der MySQL-Abfragefeldtyp JSON ist

Die Tabellenstruktur ist wie folgt: Ich würde var...

Eine kurze Analyse der Konfigurationselemente des Angular CLI-Releasepfads

Vorwort Bei der Projektfreigabe ist immer eine Ve...

Wofür wird jQuery verwendet? jQuery ist eigentlich ein js-Framework

Einführung in jQuery Die jQuery-Bibliothek kann e...