0Pricing
Vue Academy · Lekcja

Zagnieżdżone i dynamiczne trasy

Zbudują Państwo zagnieżdżone układy i dynamiczne parametry tras.

Zagnieżdżone i dynamiczne trasy to bezpłatna lekcja Vue Academy na CoddyKit. To lekcja 2 z 3. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Vue Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Vue Academy zawiera 3 lekcji w sumie.

Poza trasy statyczne

Rzeczywiste aplikacje wymagają tras, które przenoszą dane i zagnieżdżają się w układach.

  • Segmenty dynamiczne przechwytują wartości, takie jak id
  • Trasy zagnieżdżone renderują elementy potomne wewnątrz elementu nadrzędnego
  • Nazwane trasy i nawigacja programowa zapewniają większą elastyczność

Dynamiczne segmenty tras

Dwukropek definiuje segment dynamiczny, który dopasowuje dowolną wartość.

const routes = [
  { path: "/user/:id", component: UserProfile }
]

// Matches /user/1, /user/42, /user/abc

Uzyskiwanie dostępu do route.params

Przechwyconą wartość można odczytać za pomocą route.params.

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

const route = useRoute()
console.log(route.params.id)
</script>

Reagowanie na zmiany parametrów

Gdy zmienia się tylko parametr, na przykład z /user/1 na /user/2, komponent jest ponownie używany. Należy obserwować parametr, aby ponownie pobierać dane.

import { watch } from "vue"
import { useRoute } from "vue-router"

const route = useRoute()
watch(() => route.params.id, (newId) => {
  loadUser(newId)
})

Wiele segmentów dynamicznych

Trasy mogą zawierać kilka dynamicznych części.

const routes = [
  { path: "/user/:userId/post/:postId", component: Post }
]

// route.params.userId and route.params.postId

Trasy zagnieżdżone

Trasy zagnieżdżone pozwalają renderować trasy potomne wewnątrz komponentu nadrzędnego.

const routes = [
  {
    path: "/user/:id",
    component: UserLayout,
    children: [
      { path: "profile", component: Profile },
      { path: "posts", component: Posts }
    ]
  }
]

Zagnieżdżony router-view

Komponent nadrzędny potrzebuje własnego router-view, aby renderować w nim elementy potomne.

<!-- UserLayout.vue -->
<template>
  <h1>User</h1>
  <router-view></router-view>
</template>

<!-- /user/1/profile renders Profile here -->

Nazwane trasy

Należy nadać trasie name, aby odwoływać się do niej bez wpisywania ścieżki na stałe.

const routes = [
  {
    path: "/user/:id",
    name: "user",
    component: UserProfile
  }
]

Tworzenie odnośników po nazwie

router-link może wskazywać nazwaną trasę i przekazywać parametry jako obiekt.

<router-link
  :to="{ name: 'user', params: { id: 42 } }"
>
  View User
</router-link>

Nawigacja programowa

Z poziomu JavaScriptu można nawigować za pomocą metody push routera.

import { useRouter } from "vue-router"

const router = useRouter()

function goToUser(id) {
  router.push({ name: "user", params: { id } })
}

Inne metody nawigacji

Router udostępnia także inne pomocnicze metody nawigacji:

  • router.push dodaje nowy wpis w historii
  • router.replace nawiguje bez dodawania nowego wpisu w historii
  • router.back przechodzi do poprzedniej strony

Szybkie sprawdzenie

Proszę sprawdzić swoją wiedzę na temat tras dynamicznych i zagnieżdżonych.

Podsumowanie: trasy zagnieżdżone i dynamiczne

W tej części poznali Państwo zaawansowany routing:

  • Segmenty dynamiczne (/user/:id) przechwytywane w route.params
  • Trasy zagnieżdżone za pomocą children oraz zagnieżdżonego router-view
  • Nazwane trasy umożliwiają tworzenie odnośników na podstawie nazwy
  • router.push służy do nawigacji programowej

Następnie: strażniki nawigacji.

Często zadawane pytania

Czy lekcja „Zagnieżdżone i dynamiczne trasy” jest bezpłatna?

Tak — pełny tekst „Zagnieżdżone i dynamiczne trasy” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Vue Academy, przejdź na CoddyKit PRO. Kurs Vue Academy zawiera 3 lekcji w sumie.

Co nauczysz się w „Zagnieżdżone i dynamiczne trasy”?

Zbudują Państwo zagnieżdżone układy i dynamiczne parametry tras. Ćwiczysz Vue Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Vue Academy?

Nie wymagamy żadnego doświadczenia. Vue Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 3.

Ile czasu zajmuje lekcja „Zagnieżdżone i dynamiczne trasy”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Vue Academy?

Tak. Każda lekcja Vue Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. Konfiguracja Vue Router
  2. Zagnieżdżone i dynamiczne trasy
  3. Strażnicy nawigacji
← Powrót do Vue Academy