Kapitel 29: Vue Router (Teil 3) - Route-Parameter

📙 Lernziel: Query- und Route-Parameter meistern!

---

29.1 Was sind Route-Parameter?

Route-Parameter ermöglichen es, Daten durch URLs zu übergeben.

Zwei Arten:

1. Query-Parameter - ?key=value (optional)
2. Route-Parameter - /user/:id (Pflicht)

Beispiel:

/serch?q=Vue&page=1        ← Query-Parameter
/user/123                   ← Route-Parameter (id = 123)

---

29.2 Query-Parameter (route.query)

Query-Parameter sind optional und stehen nach ?.

Konfiguration:

// router/index.js
const routes = [
  { path: '/search', component: SearchView, name: 'search' }
]

Navigation mit Query-Parametern:

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

const router = useRouter()

const search = () => {
  // Mit String
  router.push('/search?q=Vue&page=1')
  
  // Mit Objekt (besser!)
  router.push({
    path: '/search',
    query: {
      q: 'Vue',
      page: '1'
    }
  })
  
  // Mit Route-Name
  router.push({
    name: 'search',
    query: {
      q: 'Vue',
      page: '1'
    }
  })
}
</script>

<template>
  <div>
    <button @click="search">Suchen</button>
  </div>
</template>

Query-Parameter auslesen:

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

const route = useRoute()

// Query-Parameter auslesen
const searchQuery = route.query.q
const page = route.query.page

console.log('Suche nach:', searchQuery)
console.log('Seite:', page)
</script>

<template>
  <div>
    <h2>Suchergebnisse für "{{ route.query.q }}"</h2>
    <p>Seite: {{ route.query.page }}</p>
  </div>
</template>

---

29.3 Route-Parameter (route.params)

Route-Parameter sind Teil der URL-Pfade (Pflicht).

Konfiguration:

// router/index.js
const routes = [
  { 
    path: '/user/:id', 
    component: UserView, 
    name: 'user' 
  }
]

Navigation mit Route-Parametern:

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

const router = useRouter()

const goToUser = () => {
  // Mit String
  router.push('/user/123')
  
  // Mit Objekt (besser!)
  router.push({
    name: 'user',
    params: {
      id: '123'
    }
  })
}
</script>

<template>
  <div>
    <button @click="goToUser">Zu User 123</button>
  </div>
</template>

Route-Parameter auslesen:

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

const route = useRoute()

// Route-Parameter auslesen
const userId = route.params.id
console.log('User ID:', userId)

// Auf Parameter-Änderungen reagieren
watch(() => route.params.id, (newId) => {
  console.log('User ID geändert:', newId)
  // Hier API-Aufruf für neuen User
})
</script>

<template>
  <div>
    <h2>User Profil (ID: {{ route.params.id }})</h2>
  </div>
</template>

---

29.4 Mehrere Route-Parameter

Beispiel:

// router/index.js
const routes = [
  { 
    path: '/user/:userId/post/:postId', 
    component: UserPostView, 
    name: 'user-post' 
  }
]

Navigation:

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

const router = useRouter()

const goToPost = () => {
  router.push({
    name: 'user-post',
    params: {
      userId: '123',
      postId: '456'
    }
  })
}
</script>

Auslesen:

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

const route = useRoute()

const userId = route.params.userId
const postId = route.params.postId
</script>

---

29.5 Optionale Route-Parameter

Optionale Parameter (Vue Router 4.1.4+):

// router/index.js
const routes = [
  { 
    path: '/user/:id?',  // ? macht Parameter optional
    component: UserView, 
    name: 'user' 
  }
]

Oder mit Spread:

// router/index.js
const routes = [
  { 
    path: '/user/:id*',  // * erlaubt 0 oder mehr
    component: UserView, 
    name: 'user' 
  }
]

---

29.6 Übung: User-Profilseite mit Route-Parameter

Aufgabe: Erstelle eine User-Profilseite, die User-ID aus Route-Parameter ausliest.

Lösung:

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

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

const routes = [
  { path: '/', component: HomeView, name: 'home' },
  { path: '/user/:id', component: UserView, name: 'user' }
]

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

export default router

2. UserView.vue erstellen:

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

const route = useRoute()
const user = ref(null)
const isLoading = ref(false)

const fetchUser = async (id) => {
  isLoading.value = true
  try {
    const response = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`)
    user.value = await response.json()
  } catch (error) {
    console.error('Fehler:', error)
  } finally {
    isLoading.value = false
  }
}

// Beim ersten Laden
onMounted(() => {
  if (route.params.id) {
    fetchUser(route.params.id)
  }
})

// Auf Route-Änderungen reagieren
watch(() => route.params.id, (newId) => {
  if (newId) {
    fetchUser(newId)
  }
})
</script>

<template>
  <div class="user-view">
    <h2>User Profil</h2>
    
    <div v-if="isLoading">Lädt...</div>
    
    <div v-else-if="user">
      <h3>{{ user.name }}</h3>
      <p>Email: {{ user.email }}</p>
      <p>Stadt: {{ user.address.city }}</p>
      
      <router-link :to="{ name: 'home' }">
        Zurück zur Startseite
      </router-link>
    </div>
    
    <div v-else>
      <p>User nicht gefunden.</p>
    </div>
  </div>
</template>

<style scoped>
.user-view {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
}

a {
  display: inline-block;
  margin-top: 20px;
  color: #42b883;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}
</style>

3. HomeView.vue (Navigation):

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

const router = useRouter()

const goToUser = (id) => {
  router.push({
    name: 'user',
    params: { id }
  })
}
</script>

<template>
  <div class="home-view">
    <h2>Startseite</h2>
    <p>Klicke auf einen User, um das Profil zu sehen.</p>
    
    <div>
      <button @click="goToUser(1)">User 1</button>
      <button @click="goToUser(2)">User 2</button>
      <button @click="goToUser(3)">User 3</button>
    </div>
  </div>
</template>

---

✅ Zusammenfassung

In diesem Kapitel hast du gelernt:

• ✅ Was Route-Parameter sind
• ✅ Query-Parameter (route.query) nutzen
• ✅ Route-Parameter (route.params) nutzen
• ✅ Mehrere Route-Parameter
• ✅ Optionale Route-Parameter
• ✅ Praxis: User-Profilseite

🎯 Nächster Schritt: In Kapitel 30 lernst du verschachtelte Routen (Nested Routes)!

---

← Zurück zu Kapitel 28: NavigationWeiter zu Kapitel 30: Verschachtelte Routen →