So handhaben Sie das Routing in Vue mit Vue Router

Vue Router, der offizielle Router für Vue, ermöglicht die Erstellung von Single-Page-Anwendungen (SPAs) in Vue. Mit Vue Router können Sie die Komponenten Ihrer Web-App verschiedenen Browserrouten zuordnen, den Verlaufsstapel Ihrer App verwalten und erweiterte Routing-Optionen einrichten.

Erste Schritte mit dem Vue-Router

Um mit Vue Router zu beginnen, führen Sie Folgendes aus npm (Node Package Manager) Befehl in Ihrem bevorzugten Verzeichnis, um Ihre Vue-Anwendung zu erstellen:

npm create vue 

Wenn Sie gefragt werden, ob Vue Router für hinzugefügt werden soll Einzelseitenanwendung Entwicklung, auswählen Ja.

Öffnen Sie als Nächstes Ihr Projekt in Ihrem bevorzugten Texteditor. Die Ihrer App src Das Verzeichnis sollte Folgendes enthalten: Router Ordner.

Der Router Ordner enthält eine index.js Datei, die den JavaScript-Code für die Verarbeitung von Routen in Ihrer Anwendung enthält. Der index.js Datei importiert zwei Funktionen aus der Vue-Router Paket: createRouter Und createWebHistory.

Der createRouter Die Funktion erstellt eine neue Routenkonfiguration aus einem Objekt. Dieses Objekt enthält die Geschichte Und Routen Schlüssel und ihre Werte. Der Routen key ist ein Array von Objekten, die die Konfiguration jeder Route detailliert beschreiben, wie im Bild oben zu sehen ist.

Nachdem Sie Ihre Routen konfiguriert haben, müssen Sie diese exportieren Router Instanz und importieren Sie diese Instanz in die main.js Datei:

import'./assets/main.css'
import { createApp } from'vue'
import App from'./App.vue'
import router from'./router'
const app = createApp(App)
app.use(router)
app.mount('#app')

Sie haben die importiert Router Funktion in die main.js Datei und veranlasste dann Ihre Vue-App, diese Router-Funktion mit dem zu verwenden verwenden Methode.

Anschließend können Sie Ihre Routen auf Ihre Vue-App anwenden, indem Sie einen ähnlichen Codeblock wie den folgenden strukturieren: