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.

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

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

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

In-Komponenten-Hooks

1. beforeRouteEnter

2. beforeRouteUpdate (neu in 2.2)

3. beforeRouteLeave

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

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.

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!