Programatik Gezinme ve useRouter
router.push(), router.replace(), router.go(), useRouter() ve useRoute() composable'ları.
Programatik Gezinme ve useRouter, CoddyKit'te ücretsiz bir Vue Academy dersidir. Bu, 4 dersinin 4. 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 4 dersten oluşur.
Koddan Gezinme
RouterLink'in yanı sıra çoğu zaman JavaScript'ten de gezinmeniz gerekir; örneğin bir form gönderiminden veya girişten sonra. useRouter bileşimi, bunu yapmak için yönlendirici örneğini sağlar.
Yönlendiriciyi Alma
<script setup> içinde useRouter() çağırın. Döndürülen nesne push, replace, go ve daha fazlasını dışa açar.
import { useRouter } from 'vue-router'
const router = useRouter()push ile Gezinme
router.push, bir bağlantıya tıklamaya benzer şekilde geçmiş yığınına bir kayıt ekler. En basit biçimi bir yol dizesi alır.
router.push('/dashboard')Rota Nesnesiyle push
Ayrıca name, params ve query içeren bir nesne geçirebilirsiniz. Adlandırılmış rotalar, yolları doğrudan kod içine yazma gereğini ortadan kaldırır.
router.push({
name: 'user',
params: { id: 42 },
query: { tab: 'profile' }
})replace: Geçmişe Kayıt Eklenmez
router.replace, geçmişe kayıt eklemeden gezinir; bu nedenle geri düğmesi bu kaydı atlar. Kullanıcıların giriş sayfasına geri dönememesi için girişten sonra bunu kullanın.
router.replace('/dashboard')Geri ve İleri Gitme
router.go(n), geçmişte n adım ilerler. router.go(-1) bir sayfa geri, router.go(1) ise ileri gider.
function goBack() {
router.go(-1)
}Eşzamansız Bir Eylemden Sonra
Tipik akış şöyledir: bir form gönderin, sonucu bekleyin, ardından gezinme gerçekleştirin. push, tamamlanmasını bekleyebileceğiniz bir Promise döndürür.
async function login() {
await auth.signIn(form)
router.push('/dashboard')
}Geçerli Rotayı Okuma
Geçerli rotanın parametrelerini ve sorgusunu okumak için useRoute bileşimini kullanın. Bunu useRouter ile karıştırmayın; useRoute rotadır, useRouter ise gezinme aracıdır.
import { useRoute } from 'vue-router'
const route = useRoute()Parametrelere Erişme
Dinamik bölümleri route.params aracılığıyla okuyun. /user/:id rotasında kimlik route.params.id konumundadır.
const userId = route.params.idSorgu Dizelerine Erişme
Sorgu dizesini route.query aracılığıyla okuyun. ?tab=profile için route.query.tab kullanın.
const tab = route.query.tabParametre Değişikliklerine Tepki Verme
route tepkisel olduğundan, aynı bileşende kalırken parametreler değiştiğinde yanıt vermek için onu watch edin.
import { watch } from 'vue'
watch(() => route.params.id, (newId) => {
loadUser(newId)
})Hızlı Kontrol
Programatik gezinme konusundaki bilginizi sınayın.
Özet
Programatik gezinmeyi öğrendiniz:
- useRouter(), push, replace ve go işlevlerini sağlar.
- push geçmişe ekler; replace eklemez; go(-1) geri gider.
- push bir yol dizesini veya { name, params, query } nesnesini kabul eder.
- useRoute(), geçerli parametreleri ve sorguyu okur ve tepkiseldir.
Sıkça Sorulan Sorular
“Programatik Gezinme ve useRouter” dersi ücretsiz mi?
Evet — “Programatik Gezinme ve useRouter” 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 4 dersten oluşur.
“Programatik Gezinme ve useRouter” dersinde ne öğreneceğim?
router.push(), router.replace(), router.go(), useRouter() ve useRoute() composable'ları. 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, 4 dersinin 4. dersidir.
“Programatik Gezinme ve useRouter” 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
- Route Meta Alanları ve Tür Tanımlama
- Route Geçişleri ve Animasyon
- Kaydırma Davranışını Yapılandırma
- Programatik Gezinme ve useRouter