VueJS - Routing
VueJS verfügt nicht über eine integrierte Router-Funktion. Wir müssen einige zusätzliche Schritte ausführen, um es zu installieren.
Direkter Download von CDN
Die neueste Version von vue-router ist verfügbar unter https://unpkg.com/vue-router/dist/vue-router.js
Unpkg.com bietet npm-basierte CDN-Links. Der obige Link wird immer auf die neueste Version aktualisiert. Wir können es herunterladen und hosten und es mit einem Skript-Tag zusammen mit vue.js wie folgt verwenden:
<script src = "/path/to/vue.js"></script>
<script src = "/path/to/vue-router.js"></script>NPM verwenden
Führen Sie den folgenden Befehl aus, um den vue-router zu installieren.
npm install vue-routerVerwenden von GitHub
Wir können das Repository wie folgt von GitHub klonen:
git clone https://github.com/vuejs/vue-router.git node_modules/vue-router
cd node_modules/vue-router
npm install
npm run buildBeginnen wir mit einem einfachen Beispiel mit vue-router.js.
Example
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
<script type = "text/javascript" src = "js/vue-router.js"></script>
</head>
<body>
<div id = "app">
<h1>Routing Example</h1>
<p>
<router-link to = "/route1">Router Link 1</router-link>
<router-link to = "/route2">Router Link 2</router-link>
</p>
<!-- route outlet -->
<!-- component matched by the route will render here -->
<router-view></router-view>
</div>
<script type = "text/javascript">
const Route1 = { template: '<div style = "border-radius:20px;background-color:cyan;width:200px;height:50px;margin:10px;font-size:25px;padding:10px;">This is router 1</div>' }
const Route2 = { template: '<div style = "border-radius:20px;background-color:green;width:200px;height:50px;margin:10px;font-size:25px;padding:10px;">This is router 2</div>' }
const routes = [
{ path: '/route1', component: Route1 },
{ path: '/route2', component: Route2 }
];
const router = new VueRouter({
routes // short for `routes: routes`
});
var vm = new Vue({
el: '#app',
router
});
</script>
</body>
</html>Output
Um mit dem Routing zu beginnen, müssen wir die Datei vue-router.js hinzufügen. Nehmen Sie den Code vonhttps://unpkg.com/vue-router/dist/vue-router.js und speichern Sie es in der Datei vue-router.js.
Das Skript wird nach vue.js wie folgt hinzugefügt:
<script type = "text/javascript" src = "js/vue.js"></script>
<script type = "text/javascript" src = "js/vue-router.js"></script>Im Hauptteil gibt es eine Router-Verbindung, die wie folgt definiert ist:
<p>
<router-link to = "/route1">Router Link 1</router-link>
<router-link to = "/route2">Router Link 2</router-link>
</p><router-link>ist eine Komponente, mit der zum HTML-Inhalt navigiert wird, der dem Benutzer angezeigt werden soll. Die Eigenschaft to ist das Ziel, dh die Quelldatei, in der der anzuzeigende Inhalt ausgewählt wird.
Im obigen Code haben wir zwei Router-Links erstellt.
Schauen Sie sich den Skriptabschnitt an, in dem der Router initialisiert wird. Es werden zwei Konstanten wie folgt erstellt:
const Route1 = { template: '<div style = "border-radius:20px;background-color:cyan;width:200px;height:50px;margin:10px;font-size:25px;padding:10px;">This is router 1</div>' };
const Route2 = { template: '<div style = "border-radius:20px;background-color:green;width:200px;height:50px;margin:10px;font-size:25px;padding:10px;">This is router 2</div>' }Sie haben Vorlagen, die angezeigt werden müssen, wenn auf den Router-Link geklickt wird.
Als nächstes folgt die Routenkonstante, die den Pfad definiert, der in der URL angezeigt werden soll.
const routes = [
{ path: '/route1', component: Route1 },
{ path: '/route2', component: Route2 }
];Routen definieren den Pfad und die Komponente. Der Weg dh/route1 wird in der URL angezeigt, wenn der Benutzer auf den Router-Link klickt.
Die Komponente übernimmt die Namen der Vorlagen, die angezeigt werden sollen. Der Pfad von den Routen muss mit der Router-Verbindung zur Eigenschaft übereinstimmen.
Zum Beispiel <Router-Link to = ”path here”> </ router-link>
Als Nächstes wird die Instanz mit dem folgenden Code für VueRouter erstellt.
const router = new VueRouter({
routes // short for `routes: routes`
});Der VueRouter-Konstruktor verwendet die Routen als Parameter. Das Router-Objekt wird mit dem folgenden Code der Haupt-Vue-Instanz zugewiesen.
var vm = new Vue({
el: '#app',
router
});Führen Sie das Beispiel aus und sehen Sie die Anzeige im Browser. Beim Überprüfen und Überprüfen der Router-Verbindung werden wir feststellen, dass dem aktiven Element eine Klasse hinzugefügt wird, wie im folgenden Screenshot gezeigt.
Die hinzugefügte Klasse ist class = “router-link-exact-active router-link-active”. Der aktive Link erhält die Klasse wie im obigen Screenshot gezeigt. Eine andere Sache zu beachten ist, dass der <Router-Link> als Tag gerendert wird.
Requisiten für Router Link
Lassen Sie uns einige weitere Eigenschaften sehen, die an <Router-Link> übergeben werden sollen.
zu
Dies ist der Zielpfad für den <Router-Link>. Wenn Sie darauf klicken, wird der Wert von to intern an router.push () übergeben. Der Wert muss eine Zeichenfolge oder ein Standortobjekt sein. Wenn Sie ein Objekt verwenden, müssen Sie es wie in Beispiel 2 gezeigt binden.
e.g. 1: <router-link to = "/route1">Router Link 1</router-link>
renders as
<a href = ”#/route”>Router Link </a>
e.g. 2: <router-link v-bind:to = "{path:'/route1'}">Router Link 1</router-link>
e.g. 3: <router-link v-bind:to =
"{path:'/route1', query: { name: 'Tery' }}">Router Link 1</router-link>//router link with query string.Es folgt die Ausgabe von zB 3.
Im URL-Pfad ist name = Tery ein Teil der Abfragezeichenfolge. Beispiel: http: //localhost/vueexamples/vue_router.html#/route1? Name = Tery
ersetzen
Durch Hinzufügen von Ersetzen zur Router-Verbindung wird die aufgerufen router.replace() Anstatt von router.push(). Beim Ersetzen wird der Navigationsverlauf nicht gespeichert.
Example
<router-link v-bind:to = "{path:'/route1', query: { name: 'Tery' }}" replace>Router Link 1</router-link>anhängen
Durch Hinzufügen von Anhängen zum <Router-Link> <Router-Link> wird der Pfad relativ.
Wenn wir von der Router-Verbindung mit Pfad / Route1 zu Router-Verbindung Pfad / Route2 wechseln möchten, wird der Pfad im Browser als / route1 / route2 angezeigt.
Example
<router-link v-bind:to = "{ path: '/route1'}" append>Router Link 1</router-link>Etikett
Derzeit wird <router-link> als Tag gerendert. Für den Fall, dass wir es als ein anderes Tag rendern möchten, müssen wir dasselbe mit tag = ”tagname” angeben.
Example
<p>
<router-link v-bind:to = "{ path: '/route1'}" tag = "span">Router Link 1</router-link>
<router-link v-bind:to = "{ path: '/route2'}" tag = "span">Router Link 2</router-link>
</p>Wir haben das Tag als span angegeben und dies wird im Browser angezeigt.
Das jetzt angezeigte Tag ist ein Span-Tag. Der Klick wird weiterhin angezeigt, wenn wir zur Navigation auf den Router-Link klicken.
aktive Klasse
Standardmäßig ist die aktive Klasse, die hinzugefügt wird, wenn die Router-Verbindung aktiv ist, Router-Link-aktiv. Wir können die Klasse überschreiben, indem wir dasselbe wie im folgenden Code gezeigt einstellen.
<style>
._active{
background-color : red;
}
</style>
<p>
<router-link v-bind:to = "{ path: '/route1'}" active-class = "_active">Router Link 1</router-link>
<router-link v-bind:to = "{ path: '/route2'}" tag = "span">Router Link 2</router-link>
</p>Die verwendete Klasse ist active_class = ”_active”. Dies ist die Ausgabe, die im Browser angezeigt wird.
exakt aktive Klasse
Die standardmäßig angewendete genau aktive Klasse ist Router-Link-genau-aktiv. Wir können es mit der exakt aktiven Klasse überschreiben.
Example
<p>
<router-link v-bind:to = "{ path: '/route1'}" exact-active-class = "_active">Router Link 1</router-link>
<router-link v-bind:to = "{ path: '/route2'}" tag = "span">Router Link 2</router-link>
</p>Dies wird im Browser angezeigt.
Veranstaltung
Derzeit ist das Standardereignis für Router-Link das Klickereignis. Wir können dasselbe mit der Ereigniseigenschaft ändern.
Example
<router-link v-bind:to = "{ path: '/route1'}" event = "mouseover">Router Link 1</router-link>Wenn wir nun mit der Maus über den Router-Link fahren, navigiert dieser wie im folgenden Browser gezeigt. Mouseover auf dem Router Link 1 und wir werden sehen, wie sich die Navigation ändert.
