Ein Anfänger -Leitfaden für Vue Router

Dieses Tutorial zeigt, dass das Erstellen einer einfachen Pokedex -App mit Vue 3 und Vue Router 4 erstellt wird und wichtige Routing -Konzepte zeigt. Wir werden den Router, die Handhabung von Routenparametern, deklarative und programmatische Navigation, verschachtelte Routen und die Implementierung einer 404 -Seite abdecken.

Dieses Tutorial setzt die grundlegende Vertrautheit mit HTML, CSS, JavaScript und Vue.js zusammen mit Node.js und der Vue Cli aus. Wir werden Axios für API -Anrufe nutzen. Der vollständige Code ist auf Github verfügbar.

TECHTSCHAFTE KONZEPTE DECKERTE:

• VUE -Router -Setup: Erfahren Sie, wie Sie Vue -Router in Ihr Vue 3 -Projekt integrieren und Routen konfigurieren.
• Routenparameter: Beherrschen Sie die Verwendung dynamischer Routensegmente (:param), um Daten zwischen den Komponenten zu übergeben.
• Navigation: Erforschen Sie sowohl die deklarative Navigation (mit <router-link></router-link>) als auch die programmatische Navigation (mit this.$router.push()).
• verschachtelte Routen: Verstehen Sie, wie Sie verschachtelte Routen für komplexere Anwendungsstrukturen erstellen.
• 404 Handhabung: Implementieren Sie eine dedizierte 404 -Seite, um ungültige URLs zu verarbeiten.
• Navigationsbeamte: Kurz eingeführt, können Sie den Navigationsfluss steuern (z. B. zur Authentifizierung).

App -Struktur:

Unsere Pokedex -App verfügt über drei Seiten:

• Pokemon -Liste: Zeigt eine Liste des ursprünglichen 151 Pokémon an.
• pokemon: zeigt grundlegende Details (Typ, Beschreibung) für ein ausgewähltes Pokémon.
• Pokemon-Details: bietet eingehende Informationen (Evolutionskette, Fähigkeiten, Bewegungen).

Einrichten der Entwicklungsumgebung:

1. Erstellen Sie ein neues Vue 3 -Projekt: vue create poke-vue-router (Wählen Sie Vue 3).
2. Installieren Sie die erforderlichen Pakete: npm install vue-router@4 axios sass-loader@10.1.1 node-sass@4.14.1 --save-dev
3. Überprüfen Sie die Standard -App (npm run serve).

Erstellen der App (vereinfachte Schritte):

1. konfigurieren main.js: import App.vue und der Router.
2. erstellen router/index.js: Routen mit createRouter und createWebHistory.
definieren.
3. Komponenten entwickeln:
Komponenten für die Pokemon -Liste, einzelne Pokémon und detaillierte Pokémon -Ansichten erstellen. Verwenden Sie Axios, um Daten von Pokeapi abzurufen.
4. Navigation implementieren: <router-link></router-link> Verwenden Sie this.$router.push() für die deklarative Navigation und
für die programmatische Navigation.
5. verschachtelte Routen hinzufügen:
Strukturrouten, um mehrere Parameter zu verarbeiten (z. B. Pokémon -Name und ID).
6. 404 Seite erstellen:
Implementieren Sie eine Catch-All-Route, um eine Seite "Nicht gefunden" für ungültige URLs anzuzeigen. Verwenden Sie einen Navigationsschutz, um gültige Pokémon -Namen zu überprüfen, bevor Sie zu Pokémon -Detailseiten navigieren.

Weitere Erkundung:

Nach Abschluss dieses Tutorials sollten Sie untersuchen:

Props übergeben, um Komponenten zu verabschieden.
Seitenübergänge hinzufügen.
Implementieren Sie faules Laden für eine verbesserte Leistung.

häufig gestellte Fragen (FAQs):

Der FAQS -Abschnitt enthält präzise Antworten auf gemeinsame Fragen zu Vue -Router, Abdeckung von Installation, Routendefinitionen, Parameterüberschreitung, 404 Handhabung und Routenschutz. Diese Fragen werden im Kontext des Inhalts des Tutorials beantwortet.

Das obige ist der detaillierte Inhalt vonEin Anfänger -Leitfaden für Vue Router. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!