Vue.js-Router

Vue.js ist ein reaktives Javascript-Framework, das zum Erstellen von UIs (User Interfaces) und SPAs (Single-Page Applications) verwendet wird. Entwickler lieben es zu programmieren und fühlen sich bei der Entwicklung von Anwendungen in Vue frei und komfortabel.js. Für Routing-Zwecke, Vue.js bietet nicht die integrierte Routing-Funktion. Es gibt jedoch eine offizielle Bibliothek von Drittanbietern mit dem Namen Vue Router, um diese Funktion bereitzustellen. Mit dieser Funktion können wir zwischen den Webseiten navigieren, aber ohne neu zu laden. In diesem Artikel werden wir also sehen, wie wir Vue Router in Vue installieren und verwenden können.js.

Installation

Wir können den Vue-Router in einen bestehenden Vue installieren.js-Projekt, indem Sie den folgenden Befehl im Terminal ausführen

npm vue-router installieren

Nach einer erfolgreichen Installation müssen wir VueRouter im Hauptverzeichnis importieren.js-Datei im src-Verzeichnis ebenfalls mit der folgenden Syntax

Vue aus 'vue' importieren
Router importieren von './router'
Vue.verwenden (Router)

Nach dem Importieren des Routers können Sie vue-router in Ihrem Projekt verwenden.

Aber wenn Sie Vue . installieren.js mit Vue CLI. Sie benötigen diesen zusätzlichen Installationsschritt nicht. Sie können während der Auswahl einer Voreinstellung ein Vue-Router-Plugin hinzufügen selecting.

Verwendung

Die Bedienung des vue-routers ist sehr einfach und leicht zu bedienen. Zuerst in der Vorlage oder HTML

In diesem ziemlich einfachen und klaren Beispiel für vue-router. Wir haben eine einfache Navigation mit Router-Link-Komponenten erstellt und stellen den Link mit der Requisite namens 'to' bereit. Der Router-Link funktioniert genauso wie ein Anker-'a'-Tag. Es wird standardmäßig als 'a'-Tag gerendert. In der Router-Ansicht haben wir die relative Komponente, die der Route entspricht.

Im Javascript müssen wir zuerst die Komponenten registrieren und importieren, um ihre Routen zu definieren. Wir nehmen an, wir haben eine Komponente namens Comp.vue im Verzeichnis views, in das wir in den Index des Routers importieren werden.js-Datei im Router-Verzeichnis und definieren Sie diese als Route.

Um eine Komponente zu importieren, verwenden wir die folgende Anweisung

Import von Comp aus "… /views/Comp.vue";

Nach dem Import müssen wir nun die Route definieren und der Komponente zuordnen. So was,

const routen = [

Pfad: "/",
Name: "Komp",
Komponente: Comp

];

Wir können auch mehrere Routen angeben, getrennt durch ein Komma. So was,

const routen = [

Pfad: "/",
Name: "Komp",
Komponente: Comp
,

Pfad: "/comp2",
Name: "Comp2",
Komponente: Comp2

];

Nach dem Definieren der Routen. Routing-Array an die Router-Instanzen übergeben. Erstellen wir also auch die Router-Instanz

const router = createRouter(
routen // kurz für 'routen: routen'
);

Am Ende in der Hauptsache.js-Datei. Wir müssen die Root-Instanz erstellen und diese ebenfalls mounten und die Routen darin einfügen, damit die gesamte App die Routen erkennt.

createApp(App)
.verwenden (Router)
.mount("#app");

Mit dieser Injektionstechnik. Wir können auf den Router in jeder Komponente zugreifen, indem wir diese.$router.

Wir können Routen jetzt programmgesteuert per Knopfdruck oder nach Belieben verschieben, anstatt die Router-Link-Komponente zu verwenden. Beispielsweise,

Methoden:
clickFunc()
diese.$router.drücken('/über')

Zusammenfassung und Zusammenfassung

In diesem Artikel haben wir gelernt, den Vue-Router auf verschiedene Weise zu installieren und den Vue-Router programmgesteuert in Javascript und im Vue zu verwenden.js-Vorlage. Wir haben auch gelernt, den Vue Router in einem bestehenden Projekt in einer sehr einfachen und Schritt für Schritt ausführlichen Anleitung einzurichten. Wenn Sie mehr über den Vue Router erfahren möchten, besuchen Sie bitte Vue Router: Official Docs.