Vue.JS -Router

Vue.JS ist ein reaktives JavaScript-Framework, mit dem UIS (Benutzeroberflächen) und SPAs (einseitige Anwendungen) erstellt werden, und Entwickler lieben es, Freiheit und Komfort zu codieren und zu fühlen, während sie Anwendungen in Vue entwickeln.JS. Für Routing -Zwecke Vue.JS liefert nicht die integrierte Routing-Funktion. Es gibt jedoch eine offizielle Bibliothek Dritter mit dem Namen Vue Router für die Bereitstellung dieser Funktion. Durch die Verwendung dieser Funktion können wir zwischen den Webseiten navigieren, jedoch ohne Nachladen. 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 vorhandenen Vue installieren.JS -Projekt, indem der folgende Befehl im Terminal ausgeführt wird

NPM Vue-Router Installieren

Nach einer erfolgreichen Installation müssen wir Vuerouter im Haupt importieren.JS -Datei im SRC -Verzeichnis auch mit der folgenden Syntax

Vue aus "Vue" importieren
Router von 'importieren'./Router '
Vue.Verwendung (Router)

Nach dem Import des Routers können Sie in Ihrem Projekt Vue-Router verwenden.

Aber wenn Sie Vue installieren.JS Verwenden Sie Vue cli. Sie benötigen diesen zusätzlichen Installationsschritt nicht. Sie können während der Auswahl eines Voreingangs ein Vue-Router-Plugin hinzufügen.

Verwendung

Die Verwendung des Vue-Routers ist sehr einfach und einfach zu bedienen. Erstens in der Vorlage oder HTML

In diesem ziemlich einfachen und klaren Beispiel von Vue-Router. Wir haben eine einfache Navigation mithilfe von Router-Link-Komponenten erstellt und den Link mit der mit dem Namen 'to' benannten Requisition angeben. Der Router-Link funktioniert genauso wie ein Anker "a" -Tag. Es wird standardmäßig als "A" -Tag gemacht. In der Router-View haben wir die relative Komponente, die der Route entspricht.

Im JavaScript müssen wir uns zunächst registrieren und die Komponenten importieren, um ihre Routen zu definieren. Wir nehmen an, dass wir eine Komponente namens Comp haben.vue im Ansichtenverzeichnis, in das wir im Routerindex importieren werden.JS -Datei im Router -Verzeichnis und definieren Sie sie als Route.

Um eine Komponente zu importieren, verwenden wir die folgende Anweisung

Importieren Sie Comp aus "... /Ansichten /Comp.Vue ";

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

const Routes = [

Weg: "/",
Name: "comp",
Komponente: comp

];

Wir können auch mehrere Routen geben, die durch ein Komma getrennt sind. So was,

const Routes = [

Weg: "/",
Name: "comp",
Komponente: comp
,

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

];

Nach dem Definieren der Routen. Übergeben Sie Routes Array an die Router -Instanzen. Lassen Sie uns also auch die Routerinstanz erstellen

const router = createrouter (
Routen // kurz für 'Routen: Routen'
);

Am Ende im Haupt.JS -Datei. Wir müssen die Stamminstanz erstellen und diese auch montieren und die Routen darin injizieren, damit die gesamte App die Routen aufmerksam wird.

CreateApp (App)
.Verwendung (Router)
.mont ("#App");

Mit dieser Injektionstechnik. Wir können in jeder Komponente auf den Router zugreifen Das.$ router.

Wir können jetzt programmgesteuert Routen beim Klicken einer Schaltfläche oder alles, was Sie wollen, anstatt die Router-Link-Komponente zu verwenden. Zum Beispiel,

Methoden:
ClickFunc ()
Das.$ router.Push ('/über')

Verpackung und Zusammenfassung

In diesem Artikel haben wir gelernt, den Vue -Router mit unterschiedlichen Arten zu installieren und Vue Router programmatisch in JavaScript und im VUE zu verwenden.JS 'Vorlage. Wir haben auch gelernt, den Vue -Router in einem vorhandenen Projekt in einem sehr einfachen und Schritt für Schritt detailliert einzurichten. Wenn Sie mehr über den Vue -Router erfahren möchten, besuchen Sie bitte Vue Router: Offizielle Dokumente.