So verwenden Sie Vue-Router-Muster und -Hooks (ausführliches Tutorial)

Dieser Artikel stellt hauptsächlich die Verwendung des Vue-Router-Modus und der Hooks vor. Jetzt teile ich ihn mit Ihnen und gebe ihn als Referenz.

Im vorherigen Artikel ging es hauptsächlich um die grundlegende Verwendung von Vuer-Router, von der man sagen kann, dass sie das Problem von Essen und Kleidung löst. Jetzt trinken wir etwas Nachmittagstee

Modus

Die Modusoptionen im Vue-Router werden hauptsächlich bei der Instanziierung des Routers wie folgt definiert

const router = new VueRouter({
　　　mode: 'history', // 两种类型history 还有 hash
   routes: routes // 可以缩写成routes
})

Für einen groben Vergleich stehen zwei Modi zur Auswahl, Verlauf und Hash.

模式	优点	缺点
hash	使用简单、无需后台支持	在url中以hash形式存在，不会传到后台
history	地址明确，便于理解和后台处理	需要后台配合

Der Hash-Modus ist eine URL für das Backend, da der Hash-Wert in der Adresse nicht an das Backend übertragen wird, sodass die Serverseite nur eine Zuordnung der Root-Adresse durchführen muss.
Die endgültige Route des Verlaufsmodus spiegelt sich im Pfadnamen der URL wider. Dieser Teil wird an den Server übertragen, sodass der Server jeden möglichen Pfadwert entsprechend zuordnen muss. Oder verwenden Sie Fuzzy-Matching für die Zuordnung.

Außerdem sollten Sie im Verlaufsmodus auf die 404-Situation achten, wenn das Backend keine Eins-zu-Eins-Zuordnung, sondern Fuzzy-Matching durchführt. Zu diesem Zeitpunkt müssen Sie die 404-Seite im Front-End-Router definieren.

Definition der 404-Route

Da der Router selbst von oben nach unten abgeglichen wird, springt er, wenn früher eine passende Route gefunden wird. Daher können Sie die 404-Route wie folgt direkt am Ende hinzufügen:

let routerConfig = [{
  path: '/pages',
  component: App,
  children: [{
    path: 'demo/step1/list',
    component: coupon,
    name: 'coupon-list',
    meta: {
      title: '红包'
    }
  }]
}, {
  path: '*',
  component: NotFound,
  name: 'notfound',
  meta: {
    title: '404-页面丢了'
  }
}]

Wenn die vorherige Übereinstimmung nicht gefunden werden kann, steht * für alle, was bedeutet, dass alle auf die 404-Seite verweisen

Routen-Hook

Routing-Hooks werden hauptsächlich für Benutzer definiert, um beim Routing von Änderungen eine spezielle Verarbeitung durchzuführen, verdammt. . Was für ein Bissen.

Im Allgemeinen bietet Vue drei Haupttypen von Hooks

Globale Hooks
2. Komponenten-Hooks

Globale Hooks

Wie der Name schon sagt, werden globale Hooks global und wie folgt verwendet

const router = new VueRouter({
  mode: 'history',
  base: __dirname,
  routes: routerConfig
})

router.beforeEach((to, from, next) => {
  document.title = to.meta.title || 'demo'
  if (!to.query.url && from.query.url) {
    to.query.url = from.query.url
  }
  next()
})

router.afterEach(route => {
})

Hooks exklusiv für eine bestimmte Route

Wie bereits erwähnt, wird es separat für eine bestimmte Route verwendet, was im Wesentlichen dem Haken in der nachfolgenden Komponente entspricht. Sie beziehen sich alle auf eine bestimmte Route. Der Unterschied besteht darin, dass die allgemeine Definition hier im Router und nicht in der Komponente erfolgt. Wie folgt

const router = new VueRouter({
 routes: [
  {
   path: '/foo',
   component: Foo,
   beforeEnter: (to, from, next) => {
    // ...
   },
   beforeLeave: (to, from, next) => {
    // ...
   }
  }
 ]
})

In-Komponenten-Hooks

Schauen Sie sich zunächst die offizielle Definition an:

Sie können die folgenden Routennavigations-Hooks direkt im Routing definieren Komponente

1. beforeRouteEnter

2. beforeRouteUpdate (neu in 2.2)

3. beforeRouteLeave

Routing-Komponente! Wichtige Dinge müssen hier erwähnt werden, und zwar die Routing-Komponente! == Komponente, Routing-Komponente! == Komponente, Routing-Komponente! == Komponenten! Ich habe vorher nie darauf geachtet, und dann habe ich törichterweise die Hook-Funktion in der Unterkomponente angepasst und festgestellt, dass sie nutzlos ist. . .

Werfen wir zunächst einen Blick darauf, was eine Routing-Komponente ist?

Routing-Komponenten: Komponenten, die direkt an der Komponente im Router definiert sind

Das heißt, andere Komponenten als die im Router definierte Eintrags-Vue-Datei haben keine Hook-Funktionen, daher gibt es keine müssen sie nutzen. Wenn Sie es jedoch verwenden, wird kein Fehler gemeldet, es reagiert lediglich nicht. (Ich wollte ein Bild zeichnen, aber ich bin zu faul ... Verstehe es einfach selbst, es ist leicht zu verstehen)

Schauen wir uns noch einmal an, wie man den Haken in der Route verwendet Sehr einfache Methoden auf Daten- und Methodenebene

beforeRouteLeave(to, from, next) {
  // ....
  next()
},
beforeRouteEnter(to, from, next) {
  // ....
  next()
},
beforeRouteUpdate(to, from, next) {
  // ....
  next()
},
computed: {},
method: {}

Drei Parameter sind an den drei Routing-Hooks beteiligt. Gehen wir hier direkt zur offiziellen Einführung

1. zu: Route: Über bis Eingabe des Zielroutenobjekts

2. von: Route: Route, die die aktuelle Navigation verlassen wird

3. nächster: Funktion: Diese Methode muss sein wird aufgerufen, diesen Hook aufzulösen. Der Ausführungseffekt hängt von den Aufrufparametern der nächsten Methode ab.

4. next(): Fahren Sie mit dem nächsten Hook in der Pipeline fort. Wenn alle Hooks ausgeführt werden, wird der Navigationsstatus bestätigt.

5. next(false): Aktuelle Navigation unterbrechen. Wenn sich die URL des Browsers ändert (vielleicht manuell durch den Benutzer oder über die Zurück-Schaltfläche des Browsers), wird die URL-Adresse auf die Adresse zurückgesetzt, die der Von-Route entspricht.

6. next(‘/’) oder next({ path: ‘/’ }): Zu einer anderen Adresse springen. Die aktuelle Navigation wird unterbrochen und eine neue Navigation gestartet.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

So ersetzen Sie Knotenelemente durch jQuery

Servlet3.0 interagiert mit reinem Javascript über Ajax Detailliert Beispiel

Beispielcode für eine baumförmige Schale, implementiert von Vue

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Vue-Router-Muster und -Hooks (ausführliches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!