So verwenden Sie Routing-Funktionen in der Vue-Dokumentation

Vue ist ein beliebtes JavaScript-Framework, das eine Reihe von Front-End-Technologien und -Konzepten nutzt, darunter Komponenten, Zustandsverwaltung und Routing-Funktionen. Für eine SPA-Anwendung (Single Page Application) ist das Routing ein sehr wichtiger Teil. Vue Router bietet eine einfache Möglichkeit, das Anwendungsrouting zu verwalten, sodass wir Routen und die entsprechenden Komponenten in der Anwendung definieren können. In diesem Artikel wird die Verwendung von Routing-Funktionen in Vue-Dokumenten vorgestellt.

Vue Router installieren

Bevor wir Vue Router verwenden, müssen wir ihn installieren. Installieren Sie Vue Router über npm:

$ npm install vue-router

Grundstruktur von Vue Router

In Vue ist eine Route die Korrespondenz zwischen einer URL-Adresse und einer Komponente. Das Folgende ist die Grundstruktur von Vue Router:

const router = new VueRouter({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    }
  ]
})

Mit dem offiziell bereitgestellten Konstruktor VueRouter können wir eine neue Routing-Instanz erstellen. In diesem Beispiel definieren wir Routing-Muster und Routing-Regeln. Es gibt zwei Routing-Modi, einen ist der Hash-Modus und der andere ist der Verlaufsmodus. Hier wählen wir den Verlaufsmodus. Routing-Regeln sind in mehrere Routen unterteilt. Jede Route verfügt über einen Pfad (Pfad), einen Namen (Name) und eine entsprechende Komponente (Komponente).

Rendering-Methode des Routings

Um Routing in einer Vue-Anwendung zu verwenden, müssen wir zunächst eine Router-View-Komponente einrichten, um den entsprechenden Teil des Routings zu hosten. Basierend auf der Pfadübereinstimmung zwischen dem Komponentenstandort und den Routing-Regeln rendert Vue automatisch die richtige Komponente am entsprechenden Standort. Wie unten gezeigt:

<template>
  <div id="app">
    <header>
      <router-link to="/">Home</router-link>
      <router-link to="/about">About</router-link>
    </header>
    <router-view></router-view>
  </div>
</template>

In diesem Beispiel wird die Routing-Komponente innerhalb der Router-View-Komponente angezeigt.

Verwendung dynamischer Parameter

Manchmal müssen wir dynamische Parameter in Routen verwenden. In einer Blog-Anwendung müssen wir beispielsweise den Artikelinhalt anhand der Artikel-ID abrufen. Im Backend verfügt die URL über einen dynamischen Artikel-ID-Parameter, z. B. „/blog/123“, wobei 123 die Artikel-ID ist. In Vue können wir Routing-Regeln verwenden, um dynamische Parameter festzulegen:

const router = new VueRouter({
  mode: 'history',
  routes: [
    {
      path: '/blog/:id',
      name: 'blog',
      component: Blog
    }
  ]
})

In diesem Beispiel definieren wir eine Routing-Regel mit dynamischen Parametern. Parameter beginnen mit einem Doppelpunkt, z. B. „:id“. Wenn „/blog/123“ übereinstimmt, ist „123“ ein dynamischer Parameter. Gleichzeitig ist es auch sehr einfach, diesen Parameter in der Komponente zu verwenden:

export default {
  data () {
    return {
      postId: null
    }
  },
  created () {
    this.postId = this.$route.params.id
    // 根据post id获取文章
  }
}

In der Komponenteninstanz können die Parameter über this.$route.params.id abgerufen werden.

Programmatische Navigation

Zu Beginn des Kapitels haben wir eine Vue Router-Instanz erstellt. Anhand dieses Beispiels können wir die Routing-Umschaltung programmgesteuert implementieren. Vue Router bietet zwei Methoden zur Implementierung der programmatischen Navigation: $router.push() und $router.replace().

Im obigen Beispiel gibt es zwei Routing-Buttons, die jeweils mit einer anderen Route verbunden sind. Durch Weiterleiten des Klickereignisses der Schaltfläche können wir $router.push() im zugrunde liegenden JavaScript verwenden, um zu einer bestimmten Route zu navigieren:

<template>
  <div id="app">
    <header>
      <button @click="$router.push('/')">Home</button>
      <button @click="$router.push('/about')">About</button>
    </header>
    <router-view></router-view>
  </div>
</template>

Navigation Guards

Beim Routenwechsel müssen wir möglicherweise einige Vorgänge ausführen, z Autorisierung, Ladedaten etc. Vue Router bietet Navigation Guards, um dieses Problem zu lösen. Navigation Guards sind eine Reihe von Funktionen, die beim Navigieren auf einer Route ausgeführt werden können, beispielsweise vor, nach oder beim Springen zu einer Route. Vue Router bietet drei Arten von Navigation Guards: Global Guard, Component Guard und Routing Guard.

Global Guard

Global Guard ist ein in der gesamten Anwendung definierter Guard, der auf allen Seiten wirksam wird. Vue Router bietet einige globale Wachen, darunter:

• beforeEach(to, from, next): wird vor der Eingabe der Route ausgeführt.
• afterEach(to, from): Wird ausgeführt, nachdem die Route eingegeben wurde.

Component Guard

Component Guard ist ein Guard, der innerhalb einer Komponente definiert ist und beim Betreten der Komponente ausgeführt wird. Vue Router bietet den folgenden Komponentenschutz:

• beforeRouteEnter(to, from, next): Wird vor dem Betreten der Komponente ausgeführt, auf die Komponenteninstanz kann nicht zugegriffen werden.
• beforeRouteUpdate(to, from, next): Wird ausgeführt, wenn die Route aktualisiert wird und auf die Komponenteninstanz zugreifen kann.
• beforeRouteLeave(to, from, next): Wird beim Verlassen der Komponente ausgeführt, Sie können auf die Komponenteninstanz zugreifen.

Routing Guard

Routing Guard ist ein Guard, der bei der Definition der Route definiert wird und in einer bestimmten Route wirksam wird. Vue Router bietet den folgenden Routing-Schutz:

• beforeEnter(to, from, next): Wird vor der Eingabe der Route ausgeführt und ist nur auf dieser Route wirksam.
• beforeResolve(to, from, next): Wird ausgeführt, wenn die Route eintritt, und kann auf die Komponenteninstanz zugreifen.

Zusammenfassung

Routing ist ein sehr wichtiger Bestandteil von Vue-Anwendungen, und Vue Router bietet uns eine einfache Möglichkeit, das Routing zu verwalten. In diesem Artikel haben wir die Grundstruktur, die Rendering-Methode, die dynamischen Parameter, die programmatische Navigation und die Navigationsschutzvorrichtungen des Vue Routers vorgestellt. Vue Router ist eine leistungsstarke und benutzerfreundliche Routing-Bibliothek. Wenn Sie Ihre Vue-Anwendung erweitern möchten, lesen Sie unbedingt die in diesen Dokumenten bereitgestellte API.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Routing-Funktionen in der Vue-Dokumentation. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!