Vue Router – Routing in Vue.js

6 Kernkonzepte

Die wichtigsten Vue Router-Konzepte für Single-Page-Applications: Routes · Router-Link & Router-View · Navigation · Route-Parameter · Navigation Guards · Lazy Loading Vue Router ist der offizielle Router für Vue.js. Er ermöglicht die Navigation zwischen verschiedenen Seiten einer Single-Page-Application (SPA) mit dynamischen Pfaden, Guards und Lazy Loading.

Routes definieren – Die Grundlage

createRouter · routes · history

// router/index.js import { createRouter, createWebHistory } from 'vue-router'; const routes = [ { path: '/', component: Home }, { path: '/about', component: About }, ]; const router = createRouter({ history: createWebHistory(), routes, });

Routes werden als Array von Route-Objekten definiert. Jede Route hat mindestens einen path und eine component. Der Router wird mit createRouter und einem history-Modus erstellt.

History-Modi

Modus	Beschreibung	Beispiel
createWebHistory	HTML5 History (empfohlen)	/about
createWebHashHistory	Hash-basiert (kein Server-Support nötig)	/#/about
createMemoryHistory	Nur für Tests/SSR	-

Beispiele

// routes mit dynamischen Segmenten und Kindern

const routes = [

{

path: '/',

component: Home,

name: 'home'

{

path: '/users/:id',

component: UserProfile,

props: true

{

path: '/blog',

component: BlogLayout,

children: [

{ path: '', component: BlogList },

{ path: ':slug', component: BlogPost }

]

{ path: '/:pathMatch(.*)*', component: NotFound } // 404-Fallback

];

Tipp: Der 404-Fallback mit /:pathMatch(.*)* fängt alle nicht definierten Routen ab. Mit props: true werden Route-Parameter automatisch als Props an die Komponente übergeben.

Router-Link & Router-View – Navigation und Ausgabe

// Navigation <RouterLink to="/about">Über uns</RouterLink> // Ausgabe der aktuellen Route <RouterView />

RouterLink erzeugt einen Navigationslink. RouterView ist der Platzhalter, an dem die aktuelle Route gerendert wird. Beide sind die zentralen Komponenten für die Navigation.

Beispiele

<RouterLink :to="{ name: 'user', params: { id: 42 } }">Benutzer 42</RouterLink>

<RouterLink :to="{ path: '/search', query: { q: 'vue' } }">Suche</RouterLink>

<p v-else>Wird geladen...</p>

</RouterView>

Tipp: Der Slot von RouterView ermöglicht das Anzeigen eines Loaders oder das Hinzufügen von Transitions. Die aktive Klasse kann mit active-class oder global mit linkActiveClass konfiguriert werden.

Navigation programmatisch – router.push(), replace(), go()

router.push · router.replace · router.go

// In einer Vue-Komponente import { useRouter } from 'vue-router'; const router = useRouter(); router.push('/about'); router.replace('/dashboard'); router.go(-1); // Zurück

Programmatische Navigation ermöglicht das Navigieren ohne RouterLink – z.B. nach Formular-Submit oder bei bestimmten Aktionen. push fügt einen Eintrag im Browser-Verlauf hinzu, replace ersetzt den aktuellen Eintrag.

Beispiele

import { useRouter } from 'vue-router';

const router = useRouter();

// Auf eine Route navigieren

function goToAbout() {

router.push('/about');

}

// Mit Objekt (benannte Route, Parameter, Query)

function goToUser(id) {

router.push({

name: 'user',

params: { id },

query: { tab: 'profile' }

});

}

// Formular absenden und weiterleiten

async function handleSubmit() {

// ... Formular verarbeiten

await saveData();

router.replace('/success'); // replace, damit Zurück-Button nicht zum Formular führt

}

// Browser-History: zurück/vorwärts

function goBack() { router.go(-1); }

function goForward() { router.go(1); }

</script>

Tipp: Verwenden Sie router.replace() für Formular-Submits oder Login-Weiterleitungen, damit der Benutzer nicht über den Zurück-Button zum Formular zurückkehrt.

Route-Parameter & Props – Dynamische Daten

:id · params · $route · props: true

// Router-Konfiguration { path: '/users/:id', component: User, props: true } // In der Komponente (mit props: true) const props = defineProps(['id']); console.log(props.id);

Route-Parameter werden mit : in der Route definiert. Mit props: true werden Parameter automatisch als Props an die Komponente übergeben – das ist sauberer als $route.params.

Beispiele

routes = [

{ path: '/users/:id', component: UserProfile, props: true },

{ path: '/posts/:postId/comment/:commentId', component: Comment, props: true }

]

const props = defineProps(['id', 'postId', 'commentId']);

console.log(props.id); // Aus der Route

</script>

<p>User ID: {{ $route.params.id }}</p>

<p>Query: {{ $route.query }}</p>

</template>

// Zugriff auf Route in der Komponente (Composition API)

import { useRoute } from 'vue-router';

const route = useRoute();

console.log(route.params.id);

Tipp: props: true ist die beste Praxis – sie macht die Komponente wiederverwendbar und testbar, da sie nicht von $route abhängig ist.

Navigation Guards – Authentifizierung & Schutz

beforeEach · beforeEnter · meta

// Globaler Guard router.beforeEach(to, from) => { if (to.meta.requiresAuth && !isLoggedIn) { return '/login'; } });

Navigation Guards schützen Routen vor unberechtigtem Zugriff. Sie können global (router.beforeEach), pro Route (beforeEnter) oder in Komponenten (beforeRouteEnter) definiert werden.

Beispiele

// routes mit meta-Feld für Authentifizierung

routes = [

{ path: '/dashboard', component: Dashboard, meta: { requiresAuth: true } },

{ path: '/admin', component: Admin, meta: { requiresAuth: true, role: 'admin' } },

]

// Globaler Guard in router/index.js

router.beforeEach(async (to, from) => {

// Authentifizierung prüfen

const isLoggedIn = await checkAuth();

if (to.meta.requiresAuth && !isLoggedIn) {

return { path: '/login', query: { redirect: to.fullPath } };

}

// Rollen-basierte Berechtigung

if (to.meta.role && userRole !== to.meta.role) {

return '/forbidden';

}

});

// Route-spezifischer Guard (beforeEnter)

{ path: '/settings', component: Settings, beforeEnter: [authGuard, logGuard] }

// In-Komponenten-Guard (Options API)

export default {

beforeRouteEnter(to, from, next) {

// Vor dem Betreten der Route

next(vm => { /* Zugriff auf this */ });

}

Tipp: Verwenden Sie meta-Felder für Metadaten wie requiresAuth oder title. Der globale Guard ist der beste Ort für zentrale Authentifizierungslogik.

Lazy Loading & Performance – Code-Splitting

import() · defineAsyncComponent

// Lazy Loading mit import() { path: '/about', component: () => import('./views/About.vue') } // Mit defineAsyncComponent (Vue 3) import { defineAsyncComponent } from 'vue'; const About = defineAsyncComponent(() => import('./views/About.vue'));

Lazy Loading (Code-Splitting) lädt Komponenten nur dann, wenn sie tatsächlich benötigt werden – das reduziert die initiale Bundle-Größe und verbessert die Ladezeit.

Beispiele

// Lazy Loading in routes

const routes = [

{ path: '/', component: Home }, // Standard-Import

{ path: '/about', component: () => import('./views/About.vue') },

{ path: '/dashboard', component: () => import('./views/Dashboard.vue') },

{ path: '/admin', component: () => import('./views/Admin.vue') }

];

// Mit defineAsyncComponent und Ladezustand

import { defineAsyncComponent } from 'vue';

const AsyncDashboard = defineAsyncComponent({

loader: () => import('./views/Dashboard.vue'),

loadingComponent: LoadingSpinner,

errorComponent: ErrorDisplay,

delay: 200, // Verzögerung vor Anzeige des LoadingComponents

timeout: 3000 // Timeout für Laden

});

// Verwendung in routes

{ path: '/dashboard', component: AsyncDashboard }

// Prefetching (Vite / Webpack) – Komponente vorladen

import(/* webpackPrefetch: true */ './views/About.vue')

Tipp: Lazy Loading ist besonders wichtig für große Anwendungen. Kombinieren Sie es mit defineAsyncComponent für Lade- und Fehlerzustände. Verwenden Sie webpackPrefetch oder webpackPreload für wichtige Routen.

Vue Router im Überblick

routes Route-Definitionen
path, component, name

RouterLink Navigationslinks
to, active-class

RouterView Ausgabe der Route
Slot für Loading

params Dynamische Segmente
:id, props: true

Guards Schutz & Prüfungen
beforeEach, beforeEnter

lazy Lazy Loading
import(), Code-Splitting

Quick Summary

routes

Routen definieren

RouterLink

Navigation

push()

Programmatisch

:id

Parameter

beforeEach

Guards

import()

Lazy Loading

const routes = [{ path: '/users/:id', component: User, props: true }] · router.push('/about')