0Pricing
Vue Academy · Ders

İç İçe ve Dinamik Route'lar

İç içe düzenler ve dinamik route parametreleri oluşturun.

İç İçe ve Dinamik Route'lar, CoddyKit'te ücretsiz bir Vue Academy dersidir. Bu, 3 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Vue Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Vue Academy kursu toplamda 3 dersten oluşur.

Statik Yönlendirmelerin Ötesi

Gerçek uygulamalar, veri taşıyan ve yerleşimların içinde iç içe bulunan yönlendirmelere ihtiyaç duyar.

  • Dinamik bölümler, id gibi değerleri yakalar
  • İç içe yönlendirmeler, alt bileşenleri bir üst bileşenin içinde oluşturur
  • Adlandırılmış yönlendirmeler ve programatik gezinme esneklik sağlar

Dinamik Yönlendirme Bölümleri

İki nokta, herhangi bir değerle eşleşen bir dinamik bölüm tanımlar.

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

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

route.params'e Erişme

Yakalanan değeri route.params üzerinden okuyun.

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

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

Parametre Değişikliklerine Tepki Verme

Yalnızca parametre değiştiğinde (örneğin /user/1'den /user/2'ye), bileşen yeniden kullanılır. Verileri yeniden yüklemek için parametreyi izleyin.

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

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

Birden Çok Dinamik Bölüm

Yönlendirmeler birden fazla dinamik bölüm içerebilir.

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

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

İç İçe Yönlendirmeler

İç içe yönlendirmeler, alt yönlendirmelerin bir üst bileşenin içinde oluşturulmasını sağlar.

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

İç İçe router-view

Alt bileşenlerin oluşturulacağı kendi router-view bileşenine üst bileşenin de ihtiyacı vardır.

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

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

Adlandırılmış Yönlendirmeler

Bir yönlendirmeye ad vererek yolu sabit kodlamadan ona başvurabilirsiniz.

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

Ada Göre Bağlantı Kurma

router-link, adlandırılmış bir yönlendirmeyi hedefleyebilir ve parametreleri bir nesne olarak geçirebilir.

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

Programatik Gezinme

JavaScript'ten yönlendiricinin push yöntemiyle gezinin.

import { useRouter } from "vue-router"

const router = useRouter()

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

Diğer Gezinme Yöntemleri

Yönlendirici başka gezinme yardımcıları da sunar:

  • router.push yeni bir geçmiş kaydı ekler
  • router.replace yeni bir geçmiş kaydı eklemeden gezinir
  • router.back önceki sayfaya gider

Hızlı Kontrol

Dinamik ve iç içe yönlendirmeler hakkındaki anlayışınızı sınayın.

Özet: İç İçe ve Dinamik Yönlendirmeler

Gelişmiş yönlendirmeyi öğrendiniz:

  • Dinamik bölümler (/user/:id), route.params içinde yakalanır
  • İç içe yönlendirmeler, children ve iç içe bir router-view aracılığıyla oluşturulur
  • Adlandırılmış yönlendirmeler, ada göre bağlantı kurmanızı sağlar
  • router.push programatik olarak gezinir

Sırada: gezinme korumaları.

Sıkça Sorulan Sorular

“İç İçe ve Dinamik Route'lar” dersi ücretsiz mi?

Evet — “İç İçe ve Dinamik Route'lar” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Vue Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Vue Academy kursu toplamda 3 dersten oluşur.

“İç İçe ve Dinamik Route'lar” dersinde ne öğreneceğim?

İç içe düzenler ve dinamik route parametreleri oluşturun. Vue Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Vue Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Vue Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 3 dersinin 2. dersidir.

“İç İçe ve Dinamik Route'lar” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Vue Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Vue Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

  1. Vue Router'ı Kurma
  2. İç İçe ve Dinamik Route'lar
  3. Gezinme Korumaları
← Vue Academy Sayfasına Dön