Ein Artikel, der die Schritte zur Verwendung von Vue Router vorstellt

Mit der kontinuierlichen Weiterentwicklung der Front-End-Technologie beginnen immer mehr Anwendungen, die Entwicklungsmethode für Einzelseitenanwendungen (Single Page Application, SPA) zu übernehmen. Als eines der wichtigen Tools für die Frontend-Entwicklung ist Vue.js für immer mehr Entwickler zu einem der bevorzugten Frameworks geworden. Und wenn wir Vue.js verwenden, um eine Single-Page-Anwendung zu erstellen, entsteht Vue Router.

Vue Router ist der offizielle Routing-Manager für Vue.js. Es ermöglicht uns, durch einfache Konfiguration Regeln für das Anwendungsrouting zu definieren und diese Regeln Komponenten zuzuordnen, um Seitensprungeffekte in Einzelseitenanwendungen zu erzielen. In diesem Artikel stellen wir die Schritte zur Verwendung von Vue Router vor.

Schritt eins: Installieren

Um Vue Router verwenden zu können, müssen Sie ihn zunächst im Projekt installieren. Sie können es über npm oder Garn installieren:

npm install vue-router --save

oder

yarn add vue-router

Schritt 2: Erstellen Sie eine Routing-Instanz

Der Kern von Vue Router Teil von Das ist das Erstellen einer Routing-Instanz. Normalerweise erstellen wir diese Instanz in der Routing-Konfigurationsdatei router.js (oder einem anderen Namen). Zuerst müssen wir Vue und Vue Router einführen:

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

Dann müssen wir Routing-Regeln definieren:

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
  { path: '/contact', component: Contact }
]

wobei „routes“ ein Array ist, das Routing-Regeln enthält. Jede Routing-Regel ist ein Objekt, das zwei Attribute enthält: Pfad und Komponente. Unter diesen stellt Pfad den Pfad der URL dar, und Komponente ist die Komponente, die dem Pfad entspricht.

Schließlich müssen wir eine Vue-Router-Instanz erstellen und die von uns definierten Routenregeln daran übergeben:

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

Beim Erstellen der Instanz können wir einige Eigenschaften konfigurieren, z B. Modus und Routen usw., werden diese zur Angabe von Routing-bezogenen Parametern verwendet.

Schritt 3: Mounten Sie die Routing-Instanz in der Root-Instanz

Wir werden die Routing-Instanz (Vue Router-Objekt) in der Root-Instanz verwenden, daher müssen wir die Instanz mounten in die Root-Instanz geladen. Zum Beispiel:

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

Hier übergeben wir die Routing-Instanz (d. h. Router) an unsere Root-Vue-Instanz und rendern die Root-Komponente (d. h. App) auf dem #app-Knoten der Anwendung.

Schritt 4: Routing-bezogene Komponenten verwenden

Wenn wir eine Vue-Router-Instanz erstellt und in der Root-Vue-Instanz gemountet haben, können wir als nächstes Routing und Navigation zwischen Vue implementieren Komponenten.

In Vue Router gibt es zwei wichtige Komponenten: Router-Ansicht und Router-Link. Router-View wird verwendet, um den spezifischen Inhalt von Routing-Komponenten anzuzeigen, während Router-Link ein Link zum Navigieren zwischen verschiedenen Routen ist.

Zum Beispiel können wir in unserer Anwendungsstammkomponente die Router-Ansicht verwenden, um die Komponenten anzuzeigen, die verschiedenen Routen entsprechen:

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

Hier übergeben wir das Router-Link-Tag Es werden einige Routing-Links erstellt. Wenn auf den Routing-Link geklickt wird, aktualisiert Vue Router automatisch die URL und rendert die Routing-Komponente in der Router-Ansicht.

Schritt 5: Routing-Hook-Funktionen verwenden

Vue Router bietet auch einige Hook-Funktionen (Routing Guards), um die Logik im Navigationsprozess zu verwalten. Diese Routing-Hooks können global oder pro Route verwendet werden.

Zum Beispiel können wir in der globalen Routing-Hook-Funktion beforeEach die Anmeldeüberprüfungslogik des Benutzers implementieren:

router.beforeEach((to, from, next) => {
  if (to.meta.requireAuth) {
    if (store.getters.isAuthenticated) {
      next()
    } else {
      next({
        path: '/login',
        query: { redirect: to.fullPath }
      })
    }
  } else {
    next()
  }
})

Im obigen Code verwenden wir den beforeEach-Routing-Hook zur Überprüfung der Benutzer Ob die Verifizierung bestanden wurde. Wenn der Benutzer authentifiziert wurde, fahren Sie mit der Navigation fort; andernfalls leiten Sie den Benutzer zur Anmeldeseite weiter.

Zusätzlich zum beforeEach-Routing-Hook bietet Vue Router auch einige andere Hook-Funktionen, die im Routing-Navigationsprozess verwendet werden. Beispielsweise wird beforeRouteEnter verwendet, um das Komponenteninstanzobjekt abzurufen, bevor eine neue Route eingegeben wird. beforeRouteUpdate wird verwendet, um das Komponenteninstanzobjekt abzurufen, wenn die aktuelle Komponente wiederverwendet wird. beforeRouteLeave wird verwendet, um das Instanzobjekt abzurufen, wenn die Navigation die aktuelle Komponente verlässt.

Die oben genannten Schritte sind die Schritte zur Verwendung von Vue Router. Vue Router bietet einen sehr umfangreichen Satz an Konfigurationsoptionen und Routing-Hook-Funktionen, die uns helfen können, den Entwicklungsprozess zu vereinfachen und die Anwendungsleistung und Benutzererfahrung zu verbessern.

Das obige ist der detaillierte Inhalt vonEin Artikel, der die Schritte zur Verwendung von Vue Router vorstellt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!