Mobile-Menu

Das JavaScript-Framework Vue.js, Teil 4 Routing in Vue-Anwendungen

Von Dr. Dirk Koller 5 min Lesedauer

Zu den Komponenten von Vue-Anwendungen können ganze Unterseiten gehören, die über das Router-Plug-in erreichbar gemacht werden. Wie das Routing umgesetzt wird, ist Thema dieses Artikels.

Bestimmte Komponenten wie Log-in-Seiten lassen sich in Vue.js direkt per Router-Plug-in ansteuern.(Bild: Gerd Altmann / Pixabay)
Bestimmte Komponenten wie Log-in-Seiten lassen sich in Vue.js direkt per Router-Plug-in ansteuern.
(Bild: Gerd Altmann / Pixabay)

Vue-Anwendungen bestehen aus Komponenten. Diese Komponenten können Bestandteile einer Seite sein, beispielsweise ein Header oder ein Footer. Das Einbinden solcher Bausteine geschieht durch das Verwenden des Komponenten-Tags innerhalb des Vue-Template.

Bei Komponenten kann es sich aber auch um ganze Seiten wie zum Beispiel eine About- oder Login-Seite handeln (die dann möglicherweise wiederum Komponenten beinhalten). Seiten lassen sich über das Router-Plug-in einbinden, so dass sie unter einer eigenen URL erreichbar sind.

Integration des Router-Plug-ins

Die Router-Option beim Anlegen eines Projekts mit Vue CLI.(Bild: Dr. Koller / Vue.js)
Die Router-Option beim Anlegen eines Projekts mit Vue CLI.
(Bild: Dr. Koller / Vue.js)

Der Router wird am einfachsten beim Erstellen der App mitgeneriert. Das create-Kommando des CLI stellt eine entsprechende Option zur Verfügung. Die Frage nach dem History-Mode sollte bejaht werden, der andernfalls verwendete Hash-Modus bringt hässliche #-Zeichen in der URL mit sich.

Wenn das Generieren des Routers beim Anlegen des Projekts versäumt wurde, ist das auch kein Problem – er lässt sich später von Hand nachrüsten. Dazu sind drei kleine Anpassungen durchzuführen. Herzstück des Routers ist die Datei index.js im Ordner src/router. Sie wird mit folgendem Inhalt angelegt:

import { createRouter, createWebHistory } from 'vue-router'const routes = []const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})export default router

Wie der Code erahnen lässt, dient das routes-Array zur Definition von Pfaden, unter denen die einzelnen Seiten erreichbar sind. Damit diese Magie funktioniert, wird in der Root-Komponente in App.vue noch das Element Router View verbaut. Es bewirkt, dass an dieser Stelle abhängig von der eingegebenen URL die gewünschte Seite eingebunden wird:

<template>
  <div id="nav">
  </div>
  <router-view/>
</template>

In main.js ist beim Erstellen der Vue-Instanz das Router-Plug-in anzugeben:

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'createApp(App).use(router).mount('#app')

Schließlich wird noch das Paket vue-router (hier für ein Vue 3-Projekt) mit npm installiert:

npm i vue-router@next --save

Anlegen einer Seite

Nachdem die App nun mithilfe des Assistenten oder händisch Routing-tauglich gemacht wurde, probieren wir die Funktionalität aus. Zu diesem Zweck legen wir unter src/views eine neue Seite Login.vue an. Geroutete Seiten werden getrennt von anderen Komponenten in diesem Verzeichnis aufbewahrt. Der Inhalt der Seite ist nicht relevant und kann knapp gehalten sein:

<template>
  <div>
  <h1>Login</h1>
  </div>
</template><script>
export default {
  name: 'Login',
}
</script>

Die neue Seite erhält einen Eintrag im routes-Array in src/router/index.js. Dazu wird der Pfad angegeben, unter dem die Seite erreichbar sein soll. Weiterhin erforderlich ist die Komponente (Seite) auf die geroutet wird. Der Name ist optional.

import Login from '../views/Login.vue'
..
const routes = [
  { path: '/login', name: 'Login', component: Login}
]

Die Seite lässt sich nach dem Start im Development-Server durch Eingabe der URL http://localhost:8080/login im Browser aufrufen. Soll die neue Seite über einen Link, beispielsweise im Menü aufgerufen werden, empfiehlt sich die Verwendung eines Router-Links:

<router-link to="/login">Login</router-link>

Router-Links sind gegenüber “normalen”-Links (a href) für interne Verlinkungen zu bevorzugen. Sie kommen mit beiden möglichen History-Modi (Hash und HTML5) klar und brauchen nicht mehr angepasst werden, falls doch noch mal gewechselt werden soll. Wurde bei der Definition der Route ein Name vergeben, so kann diese nun alternativ auch über den Namen referenziert werden:

<router-link :to="{ name: 'Login'}">Login</router-link>

Das hat den Vorteil, dass die Links nun unabhängig von den konkreten Pfaden sind. Die Pfade können deshalb ohne Anpassen von Verlinkungen im Quellcode geändert werden.

Dynamische Routen

Die oben beschriebene Route ist statisch, der Pfad bleibt immer gleich. Oft möchte man stattdessen aber variable Bestandteile in der URL haben. Der Vue-Router unterstützt sowohl Pfadvariablen, bei denen Werte als Teil des Pfades übergeben werden als auch Query-Parameter, bei denen Key/Value-Paare mit ? und & am Ende der URL aufgelistet sind.

Für Pfadvariablen wird der Name der Variablen mit einem vorangestellten Doppelpunkt an den Pfad in der Route gehängt:

{ path: '/person/:userid', name: 'Person', component: Person }

Aufrufe wie person/1 oder person/34 führen nun zur gleichen Seite Person. Auf den Inhalt der Variablen kann über den Ausdruck $route.params im Script oder Template zugegriffen werden:

{{ $route.params.userid }}

Selbstverständlich lassen sich Parameter auch mit Router-Links übergeben. Dazu wird der Parameter als Eintrag params hinter to aufgeführt:

<router-link :to="{ name: 'Person', params: {userid: '34'}}">Person</router-link>

Query-Parameter werden auf ähnliche Weise übergeben, der Schlüssel für den Eintrag im to-Attribut lautet query:

<router-link :to="{ name: 'Person', params: {userid: '34'}, query:{active: true} }">Active Person</router-link>

Der generierte Link lautet für das Beispiel http://localhost:8080/person/34?active=true. Der Zugriff auf Query-Variablen erfolgt über $route.query, hier also $route.query.active.

Jetzt Newsletter abonnieren

Täglich die wichtigsten Infos zu RZ- und Server-Technik

Mit Klick auf „Newsletter abonnieren“ erkläre ich mich mit der Verarbeitung und Nutzung meiner Daten gemäß Einwilligungserklärung (bitte aufklappen für Details) einverstanden und akzeptiere die Nutzungsbedingungen. Weitere Informationen finde ich in unserer Datenschutzerklärung. Die Einwilligungserklärung bezieht sich u. a. auf die Zusendung von redaktionellen Newslettern per E-Mail und auf den Datenabgleich zu Marketingzwecken mit ausgewählten Werbepartnern (z. B. LinkedIn, Google, Meta).

Aufklappen für Details zu Ihrer Einwilligung

Bewachte Routen: Guards

In vielen Anwendungen sind bestimmte Teile nur für eingeloggte Benutzer oder spezielle Seiten nur für den Administrator zugänglich. Das lässt sich in Vue mit Navigation-Guards realisieren. Sie überwachen die Navigation und können im Fall ungewollter Zugriffe durch Abbruch oder Weiterleitung einschreiten.

Es gibt verschiedene Typen von Guards. Globale Guards lassen sich vor (beforeEach), zur (beforeResolve) oder nach der Navigation (afterEach) aufrufen. In den Argumenten erhält man Ziel- und Herkunfts-Route und kann darauf in der übergebenen next()-Funktion reagieren:

const router = new VueRouter({ ... })router.beforeEach((to, from, next) => {
  console.log("Navigation von " + from.fullPath + " nach " + to.fullPath);
  next();
})

Per-Route-Guards dagegen überwachen nur eine bestimmte Route und werden deshalb direkt im routes-Array definiert:

{
  path: "/Person",
  component: Person,
  beforeEnter: (to, from, next) => {
    // ...
  }
}

Schließlich gibt es noch In-Component-Guards in den Varianten beforeRouteEnter, beforeRouteUpdate und beforeRouteLeave, die bei der Definition der entsprechenden Komponente ausprogrammiert werden:

<script>
export default {
  name: 'Login',
  beforeRouteEnter(to, from, next) {
    // ...
  }
}
</script>

Die wichtigsten Routing-Features sind damit vorgestellt. Es gibt aber noch mehr zu entdecken, der Vue-Router-Guide enthält weiterführende Themen.

(ID:47999257)

Weiterführende Inhalte