Kapitel 4: Routing-System

Nuxt 3 verwendet ein dateibasiertes Routing-System. Das bedeutet: Die Struktur Ihrer pages/-Verzeichnisse bestimmt automatisch die Routen Ihrer Anwendung – keine manuelle Router-Konfiguration erforderlich!

---

4.1 Grundlagen des dateibasierten Routings

Einfaches Beispiel:

pages/
├── index.vue         →  /
├── about.vue         →  /about
├── contact.vue       →  /contact
└── products/
    ├── index.vue     →  /products
    └── item.vue      →  /products/item

Nuxt generiert automatisch folgende Routen:

• / → pages/index.vue
• /about → pages/about.vue
• /contact → pages/contact.vue
• /products → pages/products/index.vue
• /products/item → pages/products/item.vue

---

4.2 Dynamische Routen

Dynamische Routen werden mit eckigen Klammern [ ] definiert.

Einfache dynamische Route:

pages/
├── users/
│   └── [id].vue     →  /users/123, /users/abc (alle IDs)

In der Komponente auf den Parameter zugreifen:

<script setup>
const route = useRoute()
const userId = route.params.id  // z.B. "123"
</script>

<template>
  <div>User ID: {{ userId }}</div>
</template>

---

Catch-all Route ([...slug])

Matcht alle Unterpfade:

pages/
├── blog/
│   └── [...slug].vue  →  /blog/a, /blog/a/b, /blog/a/b/c

Zugriff auf alle Pfadsegmente:

<script setup>
const route = useRoute()
const slug = route.params.slug  // Array: ['a', 'b', 'c']
</script>

---

4.3 Verschachtelte Routen (Nested Routes)

Nuxt unterstützt verschachtelte Routen durch Unterverzeichnisse.

Beispiel:

pages/
├── parent.vue        →  /parent
└── parent/
    └── child.vue     →  /parent/child

pages/parent.vue (Elternkomponente):

<template>
  <div>
    <h1>Elternseite</h1>
    <!-- Kind-Komponente hier anzeigen -->
    <NuxtPage />
  </div>
</template>

pages/parent/child.vue (Kindkomponente):

<template>
  <div>
    <p>Ich bin die Kindkomponente!</p>
  </div>
</template>

---

4.4 Routenparameter & Query-Parameter

Route-Parameter abrufen:

<script setup>
const route = useRoute()

// Dynamische Route: /users/[id]
const userId = route.params.id

// Query-Parameter: /search?q=nuxt&page=1
const query = route.query.q        // "nuxt"
const page = route.query.page      // "1"
</script>

---

Query-Parameter setzen (Programmatisches Navigieren):

<script setup>
const router = useRouter()

function search() {
  router.push({
    path: '/search',
    query: {
      q: 'nuxt 3',
      page: 1
    }
  })
}
</script>

---

4.5 Routen-Navigation

1. <NuxtLink> Komponente (Empfohlen)

Ersetzt <a>-Tags und bietet Client-Side Navigation (schneller).

<template>
  <!-- Einfache Navigation -->
  <NuxtLink to="/about">Über uns</NuxtLink>

  <!-- Mit Query-Parametern -->
  <NuxtLink :to="{ path: '/search', query: { q: 'nuxt' } }">
    Suche
  </NuxtLink>

  <!-- Externer Link (verwendet <a>) -->
  <NuxtLink to="https://nuxt.com" external>Nuxt Website</NuxtLink>
</template>

---

2. Programmatische Navigation (useRouter())

<script setup>
const router = useRouter()

// Navigation zu einer Route
router.push('/dashboard')

// Zurück gehen
router.back()

// Vorwärts gehen
router.forward()

// Ersetzen (kein History-Eintrag)
router.replace('/login')
</script>

---

4.6 404-Seite konfigurieren

Erstellen Sie eine Datei pages/404.vue, um eine benutzerdefinierte 404-Fehlerseite anzuzeigen.

pages/404.vue:

<script setup>
definePageMeta({
  layout: 'error'  // Optionales benutzerdefiniertes Layout
})
</script>

<template>
  <div class="error-page">
    <h1>404 - Seite nicht gefunden</h1>
    <p>Die angeforderte Seite existiert leider nicht.</p>
    <NuxtLink to="/">Zur Startseite</NuxtLink>
  </div>
</template>

<style scoped>
.error-page {
  text-align: center;
  padding: 100px 20px;
}
</style>

---

4.7 Benutzerdefinierte Routen-Regeln

Sie können das Routing-Verhalten in nuxt.config.ts anpassen.

Beispiel: Route Rules (Rendering-Modus pro Route)

// nuxt.config.ts
export default defineNuxtConfig({
  routeRules: {
    // SSR (Server-Side Rendering)
    '/': { ssr: true },

    // SSG (Static Site Generation)
    '/about': { prerender: true },

    // Client-Side Only (SPA)
    '/dashboard/**': { ssr: false },

    // Cache für 1 Stunde
    '/api/**': { cache: { maxAge: 60 * 60 } }
  }
})

---

4.8 Zusammenfassung

In diesem Kapitel haben Sie gelernt:

• ✅ Wie dateibasiertes Routing funktioniert
• ✅ Dynamische Routen mit [id].vue und [...slug].vue
• ✅ Verschachtelte Routen (Nested Routes)
• ✅ Routenparameter & Query-Parameter abrufen
• ✅ Navigation mit <NuxtLink> und useRouter()
• ✅ 404-Seite konfigurieren
• ✅ Benutzerdefinierte Route-Regeln

Nächste Schritte: Im nächsten Kapitel lernen wir Seiten & Ansichten kennen – wie man Seiten aufbaut, Komponenten verwendet und Meta-Tags für SEO konfiguriert.

---

📚 Weiterführende Ressourcen

• Nuxt 3 Routing Dokumentation
• useRoute() API
• useRouter() API
• NuxtLink Dokumentation

---

Nächstes Kapitel: Kapitel 5: Seiten & Ansichten →