VUE3-Basis-Tutorial: Routing und Navigation

VUE3 ist derzeit eines der beliebtesten Front-End-Entwicklungsframeworks, das eine einfache, flexible und effiziente Möglichkeit bietet, moderne Webanwendungen zu erstellen. Routing und Navigation sind eine der wichtigen Funktionen im VUE3-Framework. Über sie können Sie problemlos zwischen Seiten wechseln und verwalten.

Dieses Tutorial stellt die grundlegenden Konzepte und die Verwendung von Routing und Navigation im VUE3-Framework vor und hilft Ihnen, schnell mit den Routing- und Navigationsfunktionen von VUE3 zu beginnen.

1. Das Grundkonzept des Routings

Routing bezieht sich auf die Art und Weise, über verschiedene URLs auf verschiedene Seiten zuzugreifen. In VUE3 wird das Routing über die Vue-Router-Bibliothek implementiert. Vue-Router bietet Routing-Definitions- und Verwaltungsfunktionen.

Bevor Sie Vue-Router verwenden, müssen Sie die Vue-Router-Bibliothek installieren und einführen. Die Installationsmethode lautet wie folgt:

npm install vue-router

Die Methode zum Einführen der Vue-Router-Bibliothek lautet wie folgt:

import { createRouter, createWebHashHistory } from 'vue-router'

Unter diesen ist createRouter die Methode zum Erstellen von Routen, und createWebHashHistory gibt die Verwendung des Hash-Modus für das Routing an.

Beim Definieren einer Route müssen Sie den Pfad und die Komponente der Route definieren. Pfad ist die URL für den Zugriff auf die Route und Komponente ist die entsprechende Komponente.

Zum Beispiel:

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

Der obige Code definiert zwei Routen, eine ist der Stammpfad „/“, die andere ist „/about“, die entsprechende Komponente ist „About“.

Beim Erstellen einer Routing-Instanz müssen Sie die definierten Routen übergeben, wie unten gezeigt:

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

history gibt den Routing-Modus an und createWebHashHistory bedeutet die Verwendung des Hash-Modus. Zu den weiteren Modi gehören der Verlaufsmodus und der abstrakte Modus. Routen bezieht sich auf das Routing-Konfigurationsarray.

2. Grundlegendes Navigationskonzept

In VUE3 müssen Sie nach der Definition der URL und der entsprechenden Komponenten durch Routing die Navigation verwenden, um zwischen den Seiten zu wechseln und zu springen.

Navigation umfasst hauptsächlich zwei Methoden: programmatische Navigation und deklarative Navigation.

2.1 Programmatische Navigation

Programmatische Navigation bezieht sich auf das Springen und Wechseln von Seiten durch JavaScript-Code. Vue Router bietet einige Methoden zum Implementieren dieser Navigationsmethode.

Im Folgenden sind einige häufig verwendete Methoden aufgeführt:

• router.push: Wird verwendet, um zur Zielseite zu springen und einen neuen Datensatz zum Routing-Verlauf hinzuzufügen.

router.push('/home')

• router.replace: Wird verwendet, um zur Zielseite zu springen, fügt jedoch keinen neuen Datensatz zum Routing-Verlauf hinzu.

router.replace('/home')

• router.go: Wird verwendet, um eine bestimmte Anzahl von Schritten im Routing-Verlauf vorwärts oder rückwärts zu bewegen, wobei es sich um eine positive oder negative Zahl handeln kann.

router.go(-1) //后退一步

2.2 Deklarative Navigation

Deklarative Navigation bezieht sich auf das Wechseln und Springen von Seiten durch Deklaration in der Vorlage. In Vue Router können Sie die Router-Link-Komponente verwenden, um eine deklarative Navigation zu implementieren.

Router-Link-Komponente kann als Tag gerendert werden, mit dem über den Routing-Link zur Seite gesprungen werden kann.

Zum Beispiel:

<router-link to="/home">Home</router-link>

Der obige Code bedeutet, dass ein Link gerendert wird, um zum Pfad „/home“ zu springen.

Gleichzeitig unterstützt die Router-Link-Komponente auch das Routing mit Parametern, zum Beispiel:

<router-link :to="{ path: '/user/'+userId }">User</router-link>

Der obige Code bedeutet, dass durch Klicken auf den Link zum Pfad „/user/123“ gesprungen wird ein benutzerdefinierter Parameter.

3. Erweiterte Routing-Konzepte

In VUE3 gibt es zusätzlich zu den grundlegenden Routing- und Navigationsfunktionen auch einige erweiterte Routing-Konzepte, wie z. B. Routenverschachtelung, benannte Routen, Routenwächter usw.

3.1 Routenverschachtelung

Routenverschachtelung bezieht sich auf die Kombination mehrerer Routen, um eine Eltern-Kind-Beziehung zu bilden. In VUE3 wird die Routenverschachtelung durch die Definition von Unterrouten erreicht.

Zum Beispiel:

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

Im obigen Code ist eine übergeordnete Route namens „Layout“ definiert, die zwei untergeordnete Routen enthält, nämlich den Stammpfad „“ und „/about“. Die untergeordnete Route wird in der der übergeordneten Route gerendert.

3.2 Benanntes Routing

Benanntes Routing bezieht sich auf die Definition eines Namens für die Route, um den Aufruf im Programm zu erleichtern. In Vue Router kann der Name der Route über das Namensattribut definiert werden.

Zum Beispiel:

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

Im obigen Code werden die Routen der Stammpfade „/“ und „/about“ als „home“ bzw. „about“ bezeichnet.

Bei der programmatischen Navigation und der deklarativen Navigation können Seitensprünge und -wechsel durch die entsprechenden Routennamen erreicht werden.

3.3 Routenschutz

Routenschutz bedeutet, dass beim Routensprung der Prozess des Routensprungs über einige voreingestellte Hook-Funktionen gesteuert werden kann, um bestimmte Anforderungen zu erfüllen. In VUE3 bietet Vue Router zwei Arten von globalen Route Guards und lokalen Route Guards.

Global Route Guard bezieht sich auf die einheitliche Kontrolle aller Routen und wird im Allgemeinen für einige globale Vorgänge verwendet. Zu den Hook-Funktionen des globalen Routing-Guards gehören: beforeEach, beforeResolve und afterEach.

Lokaler Routenschutz bezieht sich auf die spezifische Kontrolle einer bestimmten Route oder einer Gruppe von Routen und wird im Allgemeinen für einige lokale Vorgänge verwendet. Zu den Hook-Funktionen lokaler Routenwächter gehören: beforeEnter, beforeRouteUpdate und beforeRouteLeave.

Zum Beispiel:

router.beforeEach((to, from, next) => {
  // 进行权限判断或其他操作
  next()
})

Im obigen Code wird ein globaler Routenschutz durch die Funktion „to“ und „from“ definiert, die jeweils die bevorstehende Route darstellen, und die aktuelle Route, die als Nächstes benötigt wird Wird in der Wache aufgerufen, um den Routensprungvorgang auszuführen.

4. Zusammenfassung

Dieses Tutorial stellt die grundlegenden Konzepte und die Verwendung von Routing und Navigation im VUE3-Framework sowie einige fortgeschrittene Konzepte vor. Ich hoffe, dass Sie durch dieses Tutorial die grundlegende Verwendung von Routing und Navigation in VUE3 beherrschen und Routing- und Navigationsfunktionen in tatsächlichen Projekten anwenden können.

Das obige ist der detaillierte Inhalt vonVUE3-Basis-Tutorial: Routing und Navigation. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!