Vue.js für Anfänger – Teil 8: Routing & Multi-Page App

„Nova baut ihre erste Multi-Page-Anwendung mit Vue Router“

Von Katharina „Kat“ Schmidt, Frontend-Architektin bei Java Fleet Systems Consulting

Schwierigkeit: 🟡 Mittel
Lesezeit: 25-30 Minuten
Voraussetzungen: Vue.js Basics (Teil 1-7), insbesondere Components & State Management

---

📚 Was bisher geschah – Vue.js für Anfänger

Bereits veröffentlicht:

• ✅ Teil 1: Setup & Erste API-Anbindung – Nova’s erster Vue.js Erfolg
• ✅ Teil 2: Styling & Responsive Design – Von hässlich zu schön mit Tailwind
• ✅ Teil 3: Formulare & User Input – v-model Magic & POST Requests
• ✅ Teil 4: Listen-Manipulation & Reaktivität – Vue’s Superpower verstehen
• ✅ Teil 5: Task bearbeiten & Löschen – CRUD Complete!
• ✅ Teil 6: Component Communication – Props, Events & Parent-Child
• ✅ Teil 7: State Management – Composables & Pinia Basics

Heute: Teil 8 – Routing & Multi-Page App 🧭

Neu in der Serie? Kein Problem!

• 🌱 Einsteiger? Starte mit Teil 1 für den vollen Kontext
• 🌿 Erfahren? Du kannst hier einsteigen, Basics werden kurz erklärt

---

⚡ Das Wichtigste in 30 Sekunden

Dein Problem: Deine Vue-App hat nur EINE Seite. Aber du brauchst Dashboard, Detail-Ansichten, Settings – wie bei echten Apps!

Die Lösung: Vue Router macht aus deiner Single-Page-App eine Multi-Page-Experience – ohne Page Reloads!

Heute lernst du:

• ✅ Vue Router installieren & konfigurieren
• ✅ Routes definieren & Navigation bauen
• ✅ URL-Parameter für Detail-Seiten nutzen
• ✅ Programmatische Navigation (router.push)
• ✅ Navigation Guards für geschützte Bereiche

Für wen ist dieser Artikel?

• 🌱 Anfänger: Du lernst Routing von Grund auf
• 🌿 Erfahrene: Du vertiefst Best Practices & Patterns
• 🌳 Profis: Im Bonus findest du Guards, Lazy Loading & History Modes

---

👋 Nova: „Meine App braucht MEHR als eine Seite!“

Hi! 👋

Nova hier. Also, honestly? Letzte Woche war ich SO stolz auf meine Task-App. State Management funktioniert, Components kommunizieren… alles läuft!

Dann hab ich meinem Bruder die App gezeigt.

Er: „Cool. Aber wie komm ich zur About-Seite?“
Ich: „Äh… gibt’s nicht.“
Er: „Und Settings?“
Ich: „… auch nicht.“
Er: „Das ist ja wie ein Buch mit nur einer Seite.“

Autsch.

Er hat recht. Echte Apps haben Navigation. Dashboard, Detail-Ansichten, Profile, Settings… Und wenn ich auf einen Task klicke, will ich eine Detail-Seite sehen – nicht alles auf einer Seite quetschen!

Zum Glück hatte Kat die Lösung: Vue Router.

Lass uns das gemeinsam angehen! 🚀

---

🟢 GRUNDLAGEN

💡 Du kennst die Basics schon?
→ Spring direkt zu PROFESSIONALS

Was ist Vue Router?

Stell dir vor, du hast ein Haus mit vielen Zimmern. Jedes Zimmer ist eine „Seite“ deiner App. Vue Router ist wie der Flur, der alle Zimmer verbindet – und die Türschilder, die sagen welches Zimmer was ist.

Technisch gesagt:

• Vue Router ist das offizielle Routing-Tool für Vue.js
• Es ermöglicht Client-Side Routing – Navigation ohne Page Reloads
• Die URL ändert sich, aber die Seite lädt NICHT neu (Single Page Application)

💡 Neu hier? Was ist Client-Side Routing?

Bei traditionellen Websites lädt der Browser bei jedem Klick eine NEUE HTML-Datei vom Server. Bei Client-Side Routing passiert alles im Browser – JavaScript tauscht nur den sichtbaren Inhalt aus, während die URL sich ändert. Das fühlt sich schneller und flüssiger an!

Java-Vergleich: Es ist wie der Unterschied zwischen Server-Side-Rendering (JSP/JSF) und Single-Page-Apps.

Warum brauche ich das?

Ohne Router:

myapp.com          ← Alles auf einer Seite 😬

Mit Router:

myapp.com/             ← Dashboard
myapp.com/tasks        ← Task-Liste
myapp.com/tasks/42     ← Task #42 Detail
myapp.com/settings     ← Settings
myapp.com/about        ← About-Seite

Vorteile:

1. Bessere UX – Users können vor/zurück navigieren
2. Bookmarkable URLs – Direktlinks zu Seiten möglich
3. SEO-friendly – Jede „Seite“ hat eine eigene URL
4. Strukturierter Code – Klare Trennung von Views

Dein erstes Router-Setup

Schritt 1: Vue Router installieren

npm install vue-router@4

Schritt 2: Router-Konfiguration erstellen

Erstelle eine neue Datei src/router/index.js:

// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router';

// Importiere deine View-Components
import Dashboard from '@/views/Dashboard.vue';
import About from '@/views/About.vue';

// Definiere die Routes
const routes = [
  {
    path: '/',              // URL-Pfad
    name: 'Dashboard',      // Name für programmatische Navigation
    component: Dashboard    // Welche Component anzeigen?
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
];

// Erstelle den Router
const router = createRouter({
  history: createWebHistory(),  // Echte URLs (ohne #)
  routes                        // Unsere Route-Definitionen
});

export default router;

Schritt 3: Router in der App registrieren

// src/main.js
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';  // Importiere den Router

const app = createApp(App);
app.use(router);                // Aktiviere den Router
app.mount('#app');

Schritt 4: Router-View in App.vue einbauen

<!-- src/App.vue -->
<template>
  <div class="min-h-screen bg-gray-100">
    <!-- Navigation -->
    <nav class="bg-blue-600 text-white p-4">
      <router-link to="/" class="mr-4 hover:underline">
        Dashboard
      </router-link>
      <router-link to="/about" class="mr-4 hover:underline">
        About
      </router-link>
    </nav>
    
    <!-- Hier wird der Inhalt der aktuellen Route angezeigt! -->
    <main class="p-6">
      <router-view />
    </main>
  </div>
</template>

Schritt 5: Views erstellen

<!-- src/views/Dashboard.vue -->
<template>
  <div>
    <h1 class="text-2xl font-bold mb-4">📊 Dashboard</h1>
    <p>Willkommen zurück! Hier siehst du deine Tasks.</p>
    <!-- Hier kommt später deine TaskList Component -->
  </div>
</template>

<script setup>
// Später: Tasks laden etc.
</script>

<!-- src/views/About.vue -->
<template>
  <div>
    <h1 class="text-2xl font-bold mb-4">ℹ️ About</h1>
    <p>Diese App wurde mit Vue.js gebaut. Von Nova. Mit Kats Hilfe. 💚</p>
  </div>
</template>

Das war’s! Dein erstes Routing funktioniert! 🎉

Wenn du jetzt auf „Dashboard“ klickst, siehst du die Dashboard-Component. Klick auf „About“ – und Vue Router zeigt die About-Component. Ohne Page Reload!

---

Die zwei wichtigsten Konzepte

1. <router-link> – Navigation ohne Reload

<!-- Statt <a href="/about"> nutze: -->
<router-link to="/about">About</router-link>

<!-- Mit named Route (empfohlen): -->
<router-link :to="{ name: 'About' }">About</router-link>

Warum router-link statt <a>?

• Verhindert Page Reload
• Fügt automatisch .router-link-active Klasse hinzu
• Unterstützt named Routes

2. <router-view> – Der Platzhalter

<router-view />

Das ist der Ort, wo Vue Router die aktuelle Component „einbettet“. Stell es dir wie einen TV-Bildschirm vor – der Rahmen bleibt gleich (deine App.vue), aber der Inhalt wechselt (Dashboard, About, etc.).

---

🟡 PROFESSIONALS

Route Parameters – Detail-Seiten bauen

Die echte Power kommt mit dynamischen Routes. Du willst /tasks/42 für Task #42?

// src/router/index.js
const routes = [
  // ... andere Routes
  {
    path: '/tasks/:id',      // :id ist ein Parameter!
    name: 'TaskDetail',
    component: TaskDetail,
    props: true              // Parameter als Props weitergeben
  }
];

In der TaskDetail-Component:

<!-- src/views/TaskDetail.vue -->
<template>
  <div v-if="task" class="bg-white p-6 rounded-lg shadow">
    <h1 class="text-2xl font-bold mb-4">{{ task.title }}</h1>
    <p class="text-gray-600 mb-4">{{ task.description }}</p>
    <span :class="task.completed ? 'text-green-600' : 'text-yellow-600'">
      {{ task.completed ? '✅ Erledigt' : '⏳ Offen' }}
    </span>
    
    <div class="mt-6">
      <button 
        @click="goBack" 
        class="bg-gray-500 text-white px-4 py-2 rounded hover:bg-gray-600"
      >
        ← Zurück zur Liste
      </button>
    </div>
  </div>
  
  <div v-else class="text-center py-8">
    <p>Task wird geladen...</p>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';

const route = useRoute();     // Zugriff auf aktuelle Route
const router = useRouter();   // Für programmatische Navigation

const task = ref(null);

onMounted(async () => {
  // ID aus der URL holen
  const id = route.params.id;
  
  // Task von API laden
  const response = await fetch(`http://localhost:8080/api/tasks/${id}`);
  task.value = await response.json();
});

function goBack() {
  router.back();  // Einen Schritt zurück in der History
}
</script>

Navigation zur Detail-Seite:

<!-- In deiner TaskList -->
<template>
  <div v-for="task in tasks" :key="task.id" class="task-card">
    <h3>{{ task.title }}</h3>
    
    <!-- Option 1: router-link -->
    <router-link :to="`/tasks/${task.id}`">
      Details ansehen →
    </router-link>
    
    <!-- Option 2: Mit named Route (sauberer!) -->
    <router-link :to="{ name: 'TaskDetail', params: { id: task.id } }">
      Details ansehen →
    </router-link>
  </div>
</template>

---

Programmatische Navigation

Manchmal willst du nach einer Aktion navigieren – z.B. nach dem Speichern eines Tasks:

<script setup>
import { useRouter } from 'vue-router';

const router = useRouter();

async function saveTask() {
  // Task speichern...
  const response = await fetch('/api/tasks', {
    method: 'POST',
    body: JSON.stringify(newTask.value)
  });
  
  if (response.ok) {
    const created = await response.json();
    
    // Nach dem Speichern zur Detail-Seite navigieren
    router.push({ 
      name: 'TaskDetail', 
      params: { id: created.id } 
    });
  }
}

// Weitere Navigation-Methoden:
function goToDashboard() {
  router.push('/');                    // Zur URL
  router.push({ name: 'Dashboard' }); // Zur named Route
}

function goBackTwice() {
  router.go(-2);  // 2 Schritte zurück in History
}

function replaceCurrentPage() {
  // replace statt push = kein neuer History-Eintrag
  router.replace({ name: 'Dashboard' });
}
</script>

Wann push vs. replace?

• push → User kann mit „Zurück“ zurück navigieren
• replace → Ersetzt den aktuellen History-Eintrag (z.B. nach Login)

---

Nested Routes – Layouts mit Sub-Views

Für komplexere Apps brauchst du verschachtelte Routes. Beispiel: Ein Settings-Bereich mit Unterseiten.

// src/router/index.js
const routes = [
  {
    path: '/settings',
    component: SettingsLayout,  // Das "Rahmen"-Layout
    children: [
      {
        path: '',                 // /settings
        name: 'SettingsOverview',
        component: SettingsOverview
      },
      {
        path: 'profile',          // /settings/profile
        name: 'SettingsProfile',
        component: SettingsProfile
      },
      {
        path: 'notifications',    // /settings/notifications
        name: 'SettingsNotifications',
        component: SettingsNotifications
      }
    ]
  }
];

Das Settings-Layout:

<!-- src/views/SettingsLayout.vue -->
<template>
  <div class="flex">
    <!-- Sidebar bleibt immer sichtbar -->
    <aside class="w-64 bg-gray-800 text-white min-h-screen p-4">
      <h2 class="text-xl font-bold mb-4">⚙️ Settings</h2>
      <nav class="space-y-2">
        <router-link 
          to="/settings" 
          class="block p-2 rounded hover:bg-gray-700"
        >
          Übersicht
        </router-link>
        <router-link 
          to="/settings/profile" 
          class="block p-2 rounded hover:bg-gray-700"
        >
          Profil
        </router-link>
        <router-link 
          to="/settings/notifications" 
          class="block p-2 rounded hover:bg-gray-700"
        >
          Benachrichtigungen
        </router-link>
      </nav>
    </aside>
    
    <!-- Hier wechselt der Inhalt -->
    <main class="flex-1 p-6">
      <router-view />  <!-- Nested router-view! -->
    </main>
  </div>
</template>

💡 Java-Vergleich: Nested Routes sind wie Tiles/Sitemesh Templates – ein äußeres Layout mit austauschbarem Inhalt.

---

Active Link Styling

Vue Router fügt automatisch Klassen hinzu:

<template>
  <nav>
    <!-- Bekommt 'router-link-active' wenn /settings/* aktiv -->
    <!-- Bekommt 'router-link-exact-active' nur bei exakter URL -->
    <router-link to="/settings" class="nav-link">
      Settings
    </router-link>
  </nav>
</template>

<style>
.router-link-active {
  @apply font-bold text-blue-600;
}

.router-link-exact-active {
  @apply border-b-2 border-blue-600;
}
</style>

Custom Active Classes:

<router-link 
  to="/dashboard"
  active-class="is-active"
  exact-active-class="is-current"
>
  Dashboard
</router-link>

---

Stolperfallen vermeiden

1. Der klassische .value Fehler

// ❌ FALSCH
const id = route.params.id.value;  // params ist bereits reaktiv!

// ✅ RICHTIG
const id = route.params.id;

2. Route-Änderung nicht bemerken

Wenn du auf /tasks/1 bist und auf /tasks/2 klickst, wird die Component NICHT neu erstellt! Du musst die Änderung watchen:

<script setup>
import { watch } from 'vue';
import { useRoute } from 'vue-router';

const route = useRoute();

// Watch für Parameter-Änderungen
watch(
  () => route.params.id,
  (newId) => {
    // Task neu laden wenn ID sich ändert!
    loadTask(newId);
  }
);
</script>

3. History Mode vs. Hash Mode

// History Mode - Schöne URLs
createWebHistory()   // → /tasks/42

// Hash Mode - Älterer Ansatz
createWebHashHistory()  // → /#/tasks/42

History Mode braucht Server-Konfiguration! Der Server muss alle Routes auf index.html weiterleiten, sonst gibt’s 404 bei Page Refresh.

---

🔵 BONUS

💡 Du willst mehr?
Hier findest du Advanced-Themen für Profis!

Navigation Guards

Schütze Routes vor unbefugtem Zugriff:

// src/router/index.js
import { useAuthStore } from '@/stores/auth';

const routes = [
  {
    path: '/admin',
    name: 'Admin',
    component: AdminDashboard,
    meta: { requiresAuth: true }  // Markiere geschützte Routes
  }
];

const router = createRouter({ /* ... */ });

// Global Navigation Guard
router.beforeEach((to, from) => {
  const auth = useAuthStore();
  
  if (to.meta.requiresAuth && !auth.isLoggedIn) {
    // Nicht eingeloggt? Redirect zu Login!
    return { 
      name: 'Login',
      query: { redirect: to.fullPath }  // Merke ursprüngliche URL
    };
  }
  
  // Alles okay, Navigation erlaubt
  return true;
});

export default router;

Per-Route Guards:

const routes = [
  {
    path: '/admin',
    component: Admin,
    beforeEnter: (to, from) => {
      // Nur für diese Route
      if (!isAdmin()) return '/forbidden';
    }
  }
];

In-Component Guards:

<script setup>
import { onBeforeRouteLeave } from 'vue-router';

// Warnung bei ungespeicherten Änderungen
onBeforeRouteLeave((to, from) => {
  if (hasUnsavedChanges.value) {
    const answer = window.confirm(
      'Du hast ungespeicherte Änderungen. Wirklich verlassen?'
    );
    if (!answer) return false;  // Navigation abbrechen
  }
});
</script>

---

Lazy Loading für Performance

Große Apps sollten Routes lazy loaden:

// src/router/index.js
const routes = [
  {
    path: '/',
    component: Dashboard  // Wird sofort geladen
  },
  {
    path: '/admin',
    // Wird erst geladen wenn User zu /admin navigiert!
    component: () => import('@/views/Admin.vue')
  },
  {
    path: '/reports',
    // Mit Webpack Chunk Name für besseres Debugging
    component: () => import(/* webpackChunkName: "reports" */ '@/views/Reports.vue')
  }
];

Ladeindikator für Lazy Routes:

<!-- App.vue -->
<template>
  <Suspense>
    <router-view />
    
    <template #fallback>
      <div class="flex items-center justify-center h-screen">
        <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
      </div>
    </template>
  </Suspense>
</template>

---

Scroll Behavior

Kontrolliere das Scroll-Verhalten bei Navigation:

const router = createRouter({
  history: createWebHistory(),
  routes,
  scrollBehavior(to, from, savedPosition) {
    // Bei Browser-Back: Zur gespeicherten Position
    if (savedPosition) {
      return savedPosition;
    }
    
    // Bei Anchor-Links: Zum Element scrollen
    if (to.hash) {
      return {
        el: to.hash,
        behavior: 'smooth'
      };
    }
    
    // Sonst: Nach oben scrollen
    return { top: 0 };
  }
});

---

404 Not Found Handling

const routes = [
  // ... alle anderen Routes
  
  // Catch-All Route für 404
  {
    path: '/:pathMatch(.*)*',
    name: 'NotFound',
    component: NotFound
  }
];

<!-- src/views/NotFound.vue -->
<template>
  <div class="text-center py-16">
    <h1 class="text-6xl font-bold text-gray-300 mb-4">404</h1>
    <p class="text-xl text-gray-600 mb-8">
      Oops! Diese Seite existiert nicht.
    </p>
    <router-link 
      to="/" 
      class="bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700"
    >
      Zurück zur Startseite
    </router-link>
  </div>
</template>

---

💡 Praxis-Tipps

Für Einsteiger 🌱

1. Starte mit einfachen Routes: Dashboard, About, Contact – ohne Parameter
2. Nutze named Routes: { name: 'TaskDetail' } ist wartbarer als '/tasks/42'
3. Views vs. Components: Views sind ganze „Seiten“ in /views, Components sind wiederverwendbare Teile in /components

Für den Alltag 🌿

1. Route-Struktur früh planen: Überlege dir die URL-Struktur bevor du codest
2. Parameter validieren: Prüfe ob die ID existiert bevor du sie nutzt
3. Breadcrumbs mit Route-Meta: Speichere Breadcrumb-Info in meta

Für Profis 🌳

1. Lazy Loading ab 5+ Routes: Hält das Initial Bundle klein
2. Route-Level Code Splitting: Gruppiere verwandte Routes in Chunks
3. Navigation Guards modular: Extrahiere Guard-Logik in separate Funktionen

---

🛠️ Tools & Workflow

Für Einsteiger – Das brauchst du:

Tool	Warum?	Link
Vue Router 4	Offizielles Routing für Vue 3	npm install vue-router@4
Vue DevTools	Route-Debugging & History	Browser Extension

Für Profis – Nice to have:

Tool	Warum?
unplugin-vue-router	Type-safe Routes automatisch generiert
vite-plugin-pages	File-based Routing wie Next.js

---

❓ FAQ (Häufige Fragen)

Frage 1: Brauche ich Vue Router für jede Vue-App?

Antwort: Nein! Für kleine Apps ohne echte „Seiten“ reicht auch Conditional Rendering (v-if). Aber sobald du URLs brauchst, nimm Vue Router.

Frage 2: Was ist der Unterschied zwischen push und replace?

Antwort: push fügt einen neuen Eintrag in die Browser-History hinzu (User kann „zurück“ klicken). replace ersetzt den aktuellen Eintrag – nützlich nach Login oder Redirects.

Frage 3: Warum sehe ich 404 wenn ich die Seite refreshe?

Antwort: History Mode braucht Server-Konfiguration! Der Server muss alle Anfragen auf index.html weiterleiten. Bei Vite in der Entwicklung passiert das automatisch, für Production musst du deinen Server konfigurieren.

Frage 4: Wie übergebe ich Daten zwischen Routes?

Antwort:

• URL-Parameter: /tasks/:id → für öffentliche, bookmarkbare Daten
• Query-Params: /search?q=vue → für optionale Filter
• State (via Pinia): Für komplexe Daten die nicht in die URL gehören
• router.push State: router.push({ name: 'X', state: { data } }) → für temporäre Daten

Frage 5: Kann ich Routes dynamisch hinzufügen?

Antwort: Ja! Mit router.addRoute() kannst du zur Laufzeit Routes hinzufügen – nützlich für Plugin-Systeme oder rollenbasierte Navigation.

Frage 6: Hash Mode vs. History Mode – was nehmen?

Antwort:

• History Mode (empfohlen): Schöne URLs (/tasks/42), braucht Server-Config
• Hash Mode: Funktioniert überall (/#/tasks/42), keine Server-Config nötig – aber URLs sind hässlicher

Frage 7: Was macht ihr bei „Lost in Navigation“-Momenten? 🤔

Antwort: Real talk: Nicht nur in Apps kann man sich verirren. Manchmal weiß man nicht wo man ist – im Code oder im Leben. Kat sagt immer: „Wenn du nicht weißt wo du hinwillst, ist jeder Weg falsch.“ Das gilt für Routing und für… andere Dinge. Mehr dazu vielleicht in unseren private logs. #routing-issues #the-feels

Frage 8: Wie teste ich Navigation?

Antwort: Vue Test Utils bietet Mock-Router für Unit Tests. Für E2E-Tests nutze Cypress oder Playwright – die navigieren wie echte User.

Frage 9: Kann ich Animationen bei Route-Wechsel machen?

Antwort: Ja! Wrap <router-view> in Vue’s <Transition> Component. Funktioniert genauso wie bei normalen Transitions.

Frage 10: Was ist „Route Meta“?

Antwort: Zusätzliche Daten die du an Routes hängen kannst: meta: { requiresAuth: true, title: 'Admin' }. Super für Guards, Breadcrumbs, oder dynamische Titles.

---

📖 Vue.js für Anfänger – Alle Teile

Für Einsteiger empfohlen: Starte bei Teil 1! ⭐

Teil	Thema	Level	Status
1	Setup & Erste API-Anbindung	🟢	✅ Veröffentlicht
2	Styling & Responsive Design	🟢	✅ Veröffentlicht
3	Formulare & User Input	🟢	✅ Veröffentlicht
4	Listen-Manipulation & Reaktivität	🟢	✅ Veröffentlicht
5	Task bearbeiten & Löschen (CRUD)	🟡	✅ Veröffentlicht
6	Component Communication	🟡	✅ Veröffentlicht
7	State Management	🟡	✅ Veröffentlicht
→ 8	Routing & Multi-Page App	🟡	📍 Du bist hier!
9	API Integration & Error Handling	🟡	🔜 Coming Soon
10	Testing Basics	🟡	🔜 Coming Soon
11	Performance & Production	🔴	🔜 Coming Soon
12	Nova’s Projekt – Book Buddy	🔴	🔜 Coming Soon

---

💬 Real Talk: Wegfindung

Java Fleet Büro, 16:30 Uhr. Nova starrt auf ihre Navigation.

---

Nova: „Kat, ich hab jetzt fünf Routes… aber irgendwie fühlt sich alles noch chaotisch an. Wie weiß ich, welche Struktur richtig ist?“

Kat: lehnt sich zurück „Was sagt dein Bauchgefühl?“

Nova: „Dass ich zu viele verschachtelte Routes hab? Und die URLs sind irgendwie… lang.“

Kat: „URLs sind wie Adressen. Wenn du jemandem sagst ‚Geh zu /admin/settings/users/permissions/edit/42’… würdest du das finden?“

Nova: lacht „Okay, fair point. Kürzer ist besser?“

Kat: „Kürzer, aber meaningful. /users/42/edit sagt mehr als /edit/42/user.“

Nova: „Routing ist wie… Wegfindung im echten Leben, oder? Manchmal weiß man nicht wo man hin will.“

Kat: grinst „Und manchmal will man gar nicht gefunden werden. Aber das ist ein anderes Thema. 🙃“

Nova schaut fragend, aber Kat tippt schon wieder.

---

🎁 Cheat Sheet

🟢 Basics (Zum Nachschlagen)

// Router Setup
import { createRouter, createWebHistory } from 'vue-router';

const routes = [
  { path: '/', component: Home },
  { path: '/about', name: 'About', component: About }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

<!-- Navigation -->
<router-link to="/">Home</router-link>
<router-link :to="{ name: 'About' }">About</router-link>

<!-- Inhalt -->
<router-view />

🟡 Patterns (Für den Alltag)

// Route mit Parameter
{ path: '/tasks/:id', component: TaskDetail, props: true }

// Programmatische Navigation
import { useRouter, useRoute } from 'vue-router';
const router = useRouter();
const route = useRoute();

router.push('/tasks/42');
router.push({ name: 'TaskDetail', params: { id: 42 } });
router.back();

// Aktueller Parameter
const id = route.params.id;

🔵 Advanced (Für Profis)

// Navigation Guard
router.beforeEach((to, from) => {
  if (to.meta.requiresAuth && !isLoggedIn()) {
    return { name: 'Login' };
  }
});

// Lazy Loading
component: () => import('./views/Admin.vue')

// Nested Routes
{
  path: '/settings',
  component: SettingsLayout,
  children: [
    { path: 'profile', component: Profile }
  ]
}

---

🎨 Challenge für dich!

Wähle dein Level:

🟢 Level 1 – Einsteiger

• [ ] Füge eine /contact Route zu deiner App hinzu
• [ ] Style den aktiven Link mit router-link-active Geschätzte Zeit: 15-20 Minuten

🟡 Level 2 – Fortgeschritten

• [ ] Baue eine Task-Detail-Seite mit URL-Parameter (/tasks/:id)
• [ ] Implementiere einen „Zurück“-Button mit router.back()
• [ ] Füge eine 404-Seite hinzu Geschätzte Zeit: 30-45 Minuten

🔵 Level 3 – Profi

• [ ] Implementiere einen Navigation Guard der ungespeicherte Änderungen prüft
• [ ] Baue Nested Routes für einen Settings-Bereich
• [ ] Füge Lazy Loading für alle Routes außer Dashboard hinzu Geschätzte Zeit: 60-90 Minuten

Teile dein Ergebnis! 🎉

---

📦 Downloads

Alle Code-Beispiele zum Herunterladen:

Projekt	Für wen?	Download
vue-routing-basic.zip	🟢 Einsteiger	⬇️ Download
vue-routing-complete.zip	🟡 Alle Levels	⬇️ Download
vue-routing-advanced.zip	🔵 Profis (mit Guards & Lazy Loading)	⬇️ Download

Quick Start:

# 1. ZIP entpacken
unzip vue-routing-complete.zip
cd vue-routing-complete

# 2. Dependencies installieren
npm install

# 3. Starten
npm run dev

Probleme? → Troubleshooting-Guide | → FAQ

---

🔗 Weiterführende Links

📚 Für Einsteiger

Ressource	Beschreibung
Vue Router Docs – Getting Started	Offizielle Einführung
Vue School – Vue Router Course	Video-Kurs (kostenlos)

🛠️ Tools & Extensions

Tool	Beschreibung
Vue DevTools	Debugging inkl. Routing
unplugin-vue-router	Type-safe file-based routing

📖 Für Fortgeschrittene

Ressource	Beschreibung
Vue Router Advanced Guide	Guards, Meta, Transitions
Vue Router Composition API	useRoute, useRouter Deep Dive

🔧 Offizielle Dokumentation

• Vue Router 4 Dokumentation
• Vue Router API Reference
• GitHub Repository

---

💬 Geschafft! 🎉

Was du heute gelernt hast:

✅ Vue Router installieren & konfigurieren
✅ Routes definieren mit path, name, component
✅ Navigation mit router-link und programmatisch
✅ URL-Parameter für Detail-Seiten
✅ Nested Routes für Layouts
✅ Navigation Guards für Authentifizierung

Egal ob du heute zum ersten Mal von Vue Router gehört hast oder dein Wissen vertieft hast – du hast etwas Neues gelernt. Das zählt!

Nächste Woche: Nova lernt professionelles Error Handling! 🚨 Axios, Interceptors, Toast-Notifications – und warum alert() KEINE gute Error-Strategie ist.

Fragen? Schreib uns:

• Kat: katharina.schmidt@java-developer.online
• Nova: nova.trent@java-developer.online

Keep learning, keep growing! 💚

---

Tags: #VueJS #VueRouter #Frontend #JavaScript #SinglePageApp #Routing #Tutorial #WebDevelopment

© 2025 Java Fleet Systems Consulting | java-developer.online