Zusammenfassung von 10 erweiterten Tipps für Vue Router

Vorwort

Vue Router ist der offizielle Routing-Manager für Vue.js.

Es ist tief in den Kern von Vue.js integriert und erleichtert die Erstellung von Single-Page-Anwendungen.

Zu den enthaltenen Funktionen gehören:

• Verschachtelte Routen/Ansichtstabellen
• Modulare, komponentenbasierte Routing-Konfiguration
• Routenparameter, Abfragen, Platzhalter
• Zeigen Sie Übergangseffekte basierend auf dem Vue.js-Übergangssystem an
• Feinkörnige Navigationssteuerung
• Links mit automatisch aktivierten CSS-Klassen
• HTML5-Verlaufsmodus oder Hash-Modus, automatisch heruntergestuft in IE9
• Benutzerdefiniertes Bildlaufleistenverhalten
  

Dieser Artikel ist eine Zusammenfassung einiger Dinge, die dem Autor in tatsächlichen Projekten begegnet sind. Dazu gehören vor allem:

1. Reagieren auf Änderungen der Routingparameter
2. Routenanpassung
3. Erweiterter Matching-Modus
4. Übereinstimmungspriorität
5. Der zweite und dritte Parameter von Push und Replace
6. Routing-Ansicht
7. Umleiten
8. Entkopplung von $route mit Requisiten
9. Navigationswächter
10. Guards nächste Methode
    

Ich hoffe, dieser Artikel hilft Ihnen.

Text

1. Auf Änderungen der Routing-Parameter reagieren

Bei wiederverwendeten Komponenten (nur die Routing-Parameter haben sich geändert) wird der Lifecycle-Funktions-Hook nicht aufgerufen. Wie kann die Komponente aktualisiert werden?

betrachten

betrachten:
  '$route' (nach, von) {
  // Auf Routenänderungen reagieren...
  }
}

vorRouteUpdate

beforeRouteUpdate (nach, von, weiter) {
// auf Routenänderungen reagieren...
// vergessen Sie nicht, next() aufzurufen
}

2. Routenanpassung

{
// Stimmt mit allen Pfaden überein. Pfad: '*'
}
{
// Stimmt mit jedem Pfad überein, der mit „/user-“ beginnt. Pfad: „/user-*“
}

Hinweis: Bei der Verwendung von Wildcard-Routen ist auf die richtige Reihenfolge der Routen zu achten, d.h. die Route mit dem Wildcard-Code muss an letzter Stelle stehen. Die Route { path: '*' } wird normalerweise für clientseitige 404-Fehler verwendet.

Wenn Sie den Verlaufsmodus verwenden, stellen Sie sicher, dass Ihr Server richtig konfiguriert ist.

Wenn ein Platzhalter verwendet wird, wird $route.params automatisch ein Parameter namens „pathMatch“ hinzugefügt.

Es enthält den Teil der URL, der durch Platzhalter abgeglichen wird:

//Bei gegebener Route { path: '/user-*' }
dies.$router.push('/user-admin')
dies.$route.params.pathMatch // 'admin'
//Bei gegebener Route { path: '*' }
dies.$router.push('/nicht vorhanden')
this.$route.params.pathMatch // '/nicht vorhanden'

3. Erweiterter Matching-Modus

// Benannte Parameter müssen aus "einzelnen Zeichen" bestehen [A-Za-z09] // ?Optionale Parameter { path: '/optional-params/:foo?' }
// Das Routing kann den foo-Parameter setzen oder nicht setzen, optional <router-link to="/optional-params">/optional-params</router-link>
<router-link to="/optional-params/foo">/optional-params/foo</router-link>
 
// Null oder mehr Parameter { path: '/optional-params/*' }
<router-link to="/number">Keine Parameter</router-link>
<router-link to="/number/foo000">ein Parameter</router-link>
<router-link to="/number/foo111/fff222">Mehrere Parameter</router-link>
 
 
// Ein oder mehrere Parameter { path: '/optional-params/:foo+' }
<router-link to="/nummer/foo">ein Parameter</router-link>
<router-link to="/number/foo/foo111/fff222">Mehrere Parameter</router-link>
 
// Benutzerdefinierte passende Parameter // Sie können einen benutzerdefinierten regulären Ausdruck für alle Parameter angeben, der den Standardwert ([^\/]+) überschreibt.
{ Pfad: '/optional-params/:id(\\d+)' }
{ Pfad: '/optional-params/(foo/?bar' }

4. Matching-Priorität

Manchmal kann ein Pfad mit mehreren Routen übereinstimmen.

Die Zuordnungspriorität richtet sich hierbei nach der Reihenfolge, in der die Routen definiert werden: Die zuerst definierte Route hat die höchste Priorität.

5. Der zweite und dritte Parameter von Push und Replace

In den Versionen 2.2.0+ können Sie optional onComplete- und onAbort-Rückrufe als zweites und drittes Argument für router.push oder router.replace angeben.

Diese Rückrufe werden aufgerufen, wenn die Navigation erfolgreich abgeschlossen wird (nachdem alle asynchronen Hooks aufgelöst wurden) oder beendet wird (navigiert zur gleichen Route oder zu einer anderen Route, bevor die aktuelle Navigation abgeschlossen ist). In 3.1.0+ können der zweite und dritte Parameter weggelassen werden, und router.push oder router.replace geben ein Promise zurück, wenn Promise unterstützt wird.

Schauen wir uns als nächstes ein paar Beispiele an, um zu sehen, wann der zweite und dritte Parameter aufgerufen werden:

1. Komponente 1 springt zu Komponente 2

// Komponente 1
this.$router.push({ Name: 'Nummer' }, () => {
  console.log('Komponente 1: onComplete-Rückruf');
}, () => {
  console.log('Komponente 1: onAbort-Rückruf');
});

// Komponente 2
vorRouteEnter(nach, von, weiter) {
  console.log('Komponente 2: beforeRouteEnter');
  nächste();
},
vorErstellen() {
  console.log('Komponente 2: beforeCreate');
},
erstellt() {
  console.log('Komponente 2: erstellt');
}

Das Springen zwischen Komponenten löst den onComplete-Rückruf aus.

2. Komponente 2 springt zu Komponente 2 (ohne Parameter)

dies.$router.push({ Name: 'Nummer'}, () => {
  console.log('Komponente 2: onComplete-Rückruf');
}, () => {
  console.log('Komponente 2, Selbstsprung: onAbort-Rückruf');
});

Die Komponente „Self-Jump“ löst den OnAbort-Rückruf aus, wenn kein Parameter vorhanden ist. Wenn der Selbstsprung jedoch Parameter annimmt, kann die Situation etwas anders sein.

3. Komponente 2 springt zu Komponente 2 (mit Parametern)

this.$router.push({ Name: 'Nummer', Parameter: { foo: this.Nummer}}, () => {
    console.log('Komponente 2: onComplete-Rückruf');
}, () => {
    console.log('Komponente 2, Selbstsprung: onAbort-Rückruf');
});

Die Komponente selbst springt mit Parametern und weder der onComplete-Rückruf noch der onAbort-Rückruf werden ausgelöst.

6. Routing-Ansicht

Manchmal möchten Sie mehrere Ansichten gleichzeitig (auf derselben Ebene) anzeigen, anstatt sie zu verschachteln. Wenn Sie beispielsweise ein Layout mit zwei Ansichten erstellen möchten, Seitenleiste (Seitennavigation) und Hauptansicht (Hauptinhalt), sind benannte Ansichten praktisch.

Anstatt nur eine einzige Steckdose zu haben, können Sie in Ihrer Schnittstelle mehrere einzeln benannte Ansichten haben.

Wenn die Router-Ansicht nicht benannt ist, wird sie als Standardansicht verwendet.

<router-view class="eine Ansicht anzeigen"></router-view>
<router-view class="Ansicht zwei" name="a"></router-view>
<router-view class="Ansicht drei" name="b"></router-view>

Eine Ansicht wird mithilfe einer Komponente gerendert. Daher erfordern mehrere Ansichten für dieselbe Route mehrere Komponenten.

Stellen Sie sicher, dass Sie die Komponentenkonfiguration korrekt verwenden (mit einem s):

const router = neuer VueRouter({
Routen: [
  {
    Weg: '/',
    Komponenten:
        Standard: Foo,
        eine: Bar,
        b: Baz
    }
    }
  ]
});

7. Umleitung

{ Pfad: '/a', Umleitung: '/b' }
{ Pfad: '/a', Umleitung: { Name: 'foo' }}
{ Pfad: '/a', Umleitung: zu => {
  // Methode erhält die Zielroute als Parameter // gibt den umgeleiteten String-Pfad/Pfadobjekt zurück }}

Hinweis: Navigationsschutzmaßnahmen werden nicht zum Umleiten von Routen angewendet, sondern nur zum Umleiten ihrer Ziele.

Im obigen Beispiel hätte das Hinzufügen eines beforeEach- oder beforeLeave-Schutzes zur /a-Route keine Wirkung.

8. Entkopplung von $route mit Props

Die Verwendung von $route in einer Komponente führt dazu, dass diese eng an die entsprechende Route gekoppelt wird. Dadurch kann die Komponente nur für bestimmte URLs verwendet werden, was ihre Flexibilität einschränkt.

// Routerdatei // Für Routen, die benannte Ansichten enthalten, müssen Sie die Option „Props“ für jede benannte Ansicht separat hinzufügen:
{
  Pfad: '/Nummer/:Name',
  Requisiten: wahr,
  // Objektmodus-Eigenschaften: { newsletterPopup: false }
  // Funktionsmodus-Eigenschaften: (Route) => ({Abfrage: Route.parmas.name})
  Name: 'Nummer',
  Komponente: () => import( /* webpackChunkName: "Nummer" */ './views/Nummer.vue')
}

//Komponente erhält Exportstandard{
  Requisiten: ['Name']
}

9. Navigationswächter

1. Drei globale Wächter

router.beforeEach globaler Frontschutz vor dem Betreten der Route.

router.beforeResolve Global Resolution Guard 2.5.0 hinzugefügt. Wird aufgerufen, nachdem „beforeRouteEnter“ aufgerufen wurde.

router.afterEach globaler Post-Hook tritt in die Route ein.

//Eintragsdatei Router von './router' importieren
 
// Globaler Frontguard router.beforeEach((to, from, next) => {
console.log('beforeEach globaler Frontguard');
nächste();
});
// Globaler Auflösungsschutz router.beforeResolve((to, from, next) => {
console.log('beforeResolve globaler Auflösungsschutz');
nächste();
});
// Globaler Post-Guard-Router.afterEach((to, from) => {
console.log('nach jedem globalen Post-Guard');
});

2. Exklusiver Routerschutz

beforeEnter - globaler Frontguard vor dem Betreten der Route.

{
  Pfad: '/Nummer/:Name',
  Requisiten: wahr,
  Name: 'Nummer',
  // Exklusiver Routing-Schutz beforeEnter: (to, from, next) => {
      console.log('vor Eingabe des exklusiven Routenschutzes');
      nächste();
  },
  Komponente: () => import( /* webpackChunkName: "Nummer" */ './views/Nummer.vue')
}

3. Schutz innerhalb von Komponenten

vorRouteEnter

beforeRouteUpdate (neu in 2.2)

vorRouteVerlassen

vorRouteEnter(nach, von, weiter) {
  // Wird aufgerufen, bevor die entsprechende Route, die diese Komponente rendert, bestätigt wird. // Nein! fähig! Holen Sie sich die Komponenteninstanz `this`
  //Weil die Komponenteninstanz nicht erstellt wurde, bevor der Schutz ausgeführt wird console.log('beforeRouteEnter-Komponente betritt Schutz');
  nächste();
},
vorRouteUpdate(nach, von, weiter) {
  // Wird aufgerufen, wenn sich die aktuelle Route ändert, die Komponente aber wiederverwendet wird // Beispielsweise für einen Pfad /foo/:id mit dynamischen Parametern, wenn zwischen /foo/1 und /foo/2 gesprungen wird,
  // Da dieselbe Foo-Komponente gerendert wird, wird die Komponenteninstanz wiederverwendet. Und dieser Hook wird in diesem Fall aufgerufen.
  // Sie können auf die Komponenteninstanz `this` zugreifen
  console.log('beforeRouteUpdate-Komponentenaktualisierungsschutz');
  nächste();
},
vorRouteAbfahren(nach, von, weiter) {
  // Wird aufgerufen, wenn von der entsprechenden Route dieser Komponente weg navigiert wird // Sie können auf die Komponenteninstanz `this` zugreifen
  console.log('beforeRouteLeave-Komponente verlässt den Schutz');
  nächste();
}

Komponente 1 springt zu Komponente 2, und dann springt Komponente 2 zu Komponente 2 selbst

Komponente 1 springt zu Komponente 2, dann springt Komponente 2 zu Komponente 1

10. Guard-Next-Methode

weiter: Diese Methode ruft den Resolve-Hook auf.

• next(): Fahren Sie mit dem nächsten Hook in der Pipeline fort. Wenn alle Hooks ausgeführt werden, wird der Navigationsstatus bestätigt.
• next(false): unterbricht die aktuelle Navigation. Wenn sich die Browser-URL ändert (entweder manuell durch den Benutzer oder durch Drücken der Zurück-Schaltfläche des Browsers), wird die URL-Adresse auf die Adresse zurückgesetzt, die der Absenderroute entspricht.
• next('/') oder next({ path: '/' }): zu einer anderen Adresse springen. Die aktuelle Navigation wird unterbrochen und eine neue Navigation durchgeführt. Sie können ein beliebiges Standortobjekt an „next“ übergeben und dadurch Optionen wie „replace: true“, „name: ‚home‘“ und alle in der Eigenschaft „to“ von „router-link“ oder „router.push“ verwendeten Optionen festlegen.
• next(error): (2.4.0+) Wenn das an next übergebene Argument eine Fehlerinstanz ist, wird die Navigation abgebrochen und der Fehler an den mit router.onError() registrierten Rückruf übergeben.
  

endlich

Abschließend hoffe ich, dass jeder die Dokumente sorgfältig liest und versteht, bevor er sie im Projekt verwendet, um Fehler zu vermeiden. Vielen Dank.

Damit ist dieser Artikel über 10 erweiterte Tipps für Vue Router abgeschlossen. Weitere erweiterte Tipps für Vue Router finden Sie auf 123WORDPRESS.COM in früheren Artikeln oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!