Kapitel 31: Vue Router (Teil 5) - Weiterleitungen & 404

📙 Lernziel: Redirects und 404-Seiten meistern!

---

31.1 Was sind Weiterleitungen (Redirects)?

Redirects leiten von einer URL zu einer anderen weiter.

Anwendungsfälle:

• ✅ Alte URLs zu neuen URLs weiterleiten
• ✅ Standard-Route festlegen (z.B. / → /home)
• ✅ Sprach-Umleitung (z.B. / → /de)

---

31.2 Redirects konfigurieren

Einfacher Redirect:

// router/index.js
const routes = [
  {
    path: '/',
    redirect: '/home'  // Weiterleitung
  },
  {
    path: '/home',
    component: HomeView
  }
]

Redirect mit name:

const routes = [
  {
    path: '/',
    redirect: { name: 'home' }  // Mit Route-Name
  },
  {
    path: '/home',
    name: 'home',
    component: HomeView
  }
]

Dynamischer Redirect:

const routes = [
  {
    path: '/user/:id',
    redirect: (to) => {
      // Dynamische Weiterleitung
      return { name: 'user-profile', params: { id: to.params.id } }
    }
  }
]

---

31.3 404-Seite (Not Found)

404-Seite wird angezeigt, wenn Route nicht gefunden wird.

Konfiguration:

// router/index.js
import NotFound from '../views/NotFound.vue'

const routes = [
  {
    path: '/',
    component: HomeView
  },
  {
    path: '/about',
    component: AboutView
  },
  // 404 Route (muss als LETZTES stehen!)
  {
    path: '/:pathMatch(.*)*',
    component: NotFound
  }
]

Erklärung:

• path: '/:pathMatch(.*)*' - Fängt ALLE nicht gefundenen Routen ab
• ✅ Muss als LETZTES in routes Array stehen!

---

31.4 NotFound.vue erstellen

Beispiel:

<!-- views/NotFound.vue -->
<script setup>
import { useRouter } from 'vue-router'

const router = useRouter()

const goHome = () => {
  router.push('/')
}
</script>

<template>
  <div class="not-found">
    <h2>404 - Seite nicht gefunden</h2>
    <p>Die angeforderte Seite existiert nicht.</p>
    <button @click="goHome()">Zurück zur Startseite</button>
  </div>
</template>

<style scoped>
.not-found {
  text-align: center;
  padding: 100px 20px;
}

h2 {
  color: #42b883;
  font-size: 3em;
}

button {
  padding: 10px 20px;
  background: #42b883;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  margin-top: 20px;
}
</style>

---

31.5 Wildcard-Routen (Dynamisch)

Parameter aus 404-Route auslesen:

<!-- views/NotFound.vue -->
<script setup>
import { useRoute } from 'vue-router'

const route = useRoute()
const notFoundPath = route.params.pathMatch
</script>

<template>
  <div class="not-found">
    <h2>404 - Seite nicht gefunden</h2>
    <p>Die Seite "{{ notFoundPath }}" existiert nicht.</p>
    <button @click="$router.push('/')">Zurück zur Startseite</button>
  </div>
</template>

Ergebnis:

• URL: /nicht-existierend → notFoundPath = "nicht-existierend"

---

31.6 Übung: Redirects & 404 implementieren

Aufgabe: Erstelle Redirect von /home zu / und eine 404-Seite.

Lösung:

1. Router konfigurieren (router/index.js):

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import AboutView from '../views/AboutView.vue'
import NotFound from '../views/NotFound.vue'

const routes = [
  {
    path: '/',
    component: HomeView
  },
  {
    path: '/home',
    redirect: '/'  // Weiterleitung zu Startseite
  },
  {
    path: '/about',
    component: AboutView
  },
  // 404 Route (muss als letztes stehen!)
  {
    path: '/:pathMatch(.*)*',
    component: NotFound
  }
]

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

export default router

2. NotFound.vue erstellen:

<!-- views/NotFound.vue -->
<script setup>
import { useRouter } from 'vue-router'

const router = useRouter()
</script>

<template>
  <div class="not-found">
    <h2>404</h2>
    <p>Seite nicht gefunden!</p>
    <button @click="router.push('/')">Startseite</button>
  </div>
</template>

<style scoped>
.not-found {
  text-align: center;
  padding: 100px;
}

button {
  padding: 10px 20px;
  background: #42b883;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
</style>

3. Testen:

• /home → Weiterleitung zu /
• /nicht-existierend → Zeigt 404-Seite

---

✅ Zusammenfassung

In diesem Kapitel hast du gelernt:

• ✅ Was Redirects sind
• ✅ Redirects konfigurieren (redirect)
• ✅ 404-Seite erstellen
• ✅ Wildcard-Routen (/:pathMatch(.*)*)
• ✅ Praxis: Redirects & 404 implementieren

🎯 Nächster Schritt: In Kapitel 32 lernst du Route-Guards (Navigation Guards)!

---

← Zurück zu Kapitel 30: Verschachtelte RoutenWeiter zu Kapitel 32: Route-Guards →