Dynamiczne Trasy

Każdy modul bazy NOVA LAB ma swój unikalny identyfikator. Podobnie możemy tworzyć dynamiczne ścieżki w aplikacji - trasy, które przyjmują parametry w URL.

Route Params

Parametr dynamiczny definiujemy przez dwukropek

:

w sciezce:

1const routes = [
2  {
3    path: '/system/:id',
4    name: 'system-detail',
5    component: SystemDetail
6  },
7  {
8    path: '/crew/:name',
9    name: 'crew-detail',
10    component: CrewDetail
11  },
12  // Wiele parametrow
13  {
14    path: '/modułe/:moduleId/system/:systemId',
15    name: 'modułe-system',
16    component: ModuleSystem
17  }
18]

Odczyt Parametrow - useRoute()

Composable

useRoute()

daje dostęp do informacji o aktualnym route, włącznie z parametrami:

1<script setup>
2import { useRoute } from 'vue-router'
3
4const route = useRoute()
5
6// Dostęp do parametrow
7console.log(route.params.id) // np. '42'
8console.log(route.path)      // np. '/system/42'
9console.log(route.name)      // np. 'system-detail'
10</script>
11
12<template>
13  <div>
14    <h1>System #{{ route.params.id }}</h1>
15  </div>
16</template>

Nawigacja z Parametrami

1<template>
2  <div v-for="system in systems" :key="system.id">
3    <!-- String URL -->
4    <RouterLink :to="\`/system/\${system.id}\`">
5      {{ system.name }}
6    </RouterLink>
7
8    <!-- Object notation (zalecana) -->
9    <RouterLink :to="{ name: 'system-detail', params: { id: system.id } }">
10      {{ system.name }}
11    </RouterLink>
12  </div>
13</template>

Reaktywnosc na Zmiany Params

Gdy zmieniasz parametr w ramach tego samego route, komponent NIE jest odmontowywany. Używaj

watch

do reagowania na zmiany:

1<script setup>
2import { ref, watch } from 'vue'
3import { useRoute } from 'vue-router'
4
5const route = useRoute()
6const systemData = ref(null)
7
8watch(
9  () => route.params.id,
10  (newId) => {
11    // Załaduj dane nowego systemu
12    loadSystem(newId)
13  },
14  { immediate: true }
15)
16</script>

Query Parameters

Parametry zapytania (query) to czesc URL po znaku

?

:

1<script setup>
2import { useRoute, useRouter } from 'vue-router'
3
4const route = useRoute()
5const router = useRouter()
6
7// URL: /systems?modułe=habitat&sort=priority
8console.log(route.query.modułe) // 'habitat'
9console.log(route.query.sort)   // 'priority'
10
11// Nawigacja z query
12function filterByModule(modułe) {
13  router.push({
14    name: 'systems',
15    query: { modułe, sort: 'priority' }
16  })
17}
18</script>

Opcjonalne i Walidowane Parametry

1const routes = [
2  // Opcjonalny parametr z ?
3  { path: '/system/:id?' },
4
5  // Regex - tylko liczby
6  { path: '/system/:id(\\d+)' },
7
8  // Powtarzalny parametr
9  { path: '/modules/:ids+' }
10]