yoklateknik mülakat
GelişimGeçmiş

Frontend Vue Router State Management Mülakat Soruları

75 doğrulanmış Frontend Vue Router State Management mülakat sorusu — cevaplarıyla çöz, açıklamalarıyla öğren, gerçek simülasyonda kendini test et.

Gerçek simülasyonu dene →

Örnek sorular

Vue Router State ManagementZorluk 1
Vue Router kurulumunda <router-view /> ne yapar?
  • aRoute yapılandırmasından oluşturulan bir navigasyon menüsü render eder
  • bMevcut route'un eşleştiği component'i render eder✓
  • cKayıtlı tüm route'ların component'lerini aynı anda render eder
  • dYalnızca kök App.vue içinde render edilebilir, başka yerde olmaz
Açıklama:<router-view />, mevcut URL'nin router yapılandırmasına göre eşleştiği component'i render eden bir yer tutucudur. İç içe route'lar için iç içe geçebilir ve birden fazla kez görünebilir (named view), ama temel işi her zaman 'aktif route'un component'ini göster'tir.
Vue Router State ManagementZorluk 1
// router config
{ path: '/user/:id', component: UserView }

<script setup>
import { useRoute } from 'vue-router'
const route = useRoute()
console.log(route.params.id)
</script>

URL /user/42 olduğunda bu ne loglar?
  • aundefined, çünkü params yalnızca useRouter ile çalışır
  • bTam yol string'i /user/42
  • c"42" string'i✓
  • d42'ye resolve olan bir Promise
Açıklama:useRoute() mevcut route nesnesini döner; route.params, path'ten eşleşen dinamik segmentleri, route yapılandırmasında verilen isimle (:id) tutar. Tekrarlanmayan bu id parametresi bir string'dir, bu yüzden route.params.id bir sayı değil "42"'dir.
Vue Router State ManagementZorluk 1
router.push('/about') ile <router-link to="/about"> arasındaki temel fark nedir?
  • arouter-link tıklanabilir bir <a> elemanı render eder; router.push aynı navigasyonun kod içinden programatik olarak tetiklenmiş halidir✓
  • brouter.push tüm sayfayı yeniden yükler, router-link yüklemez
  • crouter-link yalnızca <template> içinde çalışır, bu yüzden router.push olmadan hiç navigasyon yapamaz
  • dTamamen ilgisiz şeyler yaparlar — biri URL'yi değiştirir, diğeri component state'ini değiştirir
Açıklama:İkisi de sonuçta router'ın navigasyon mantığını çağırır; <router-link> navigasyon yapılabilir bir anchor render etmenin bildirimsel, template-dostu yoludur, router.push() ise aynı türde navigasyonu JavaScript'ten (örn. bir form submit'inden sonra) tetiklemenin buyuru (imperative) API'sidir.
Vue Router State ManagementZorluk 2
const routes = [
  { path: '/products', name: 'products', component: ProductList },
]
router.push({ name: 'products' })

Bu çağrı ne yapar?
  • aHata fırlatır, çünkü push string path bekler, obje değil
  • bEşleşen name'e sahip route'u çözerek /products'a navigasyon yapar✓
  • cLiteral olarak /{ name: 'products' } adlı bir route'a navigasyon yapar
  • dSadece URL'yi günceller, eşleşen component'i render etmez
Açıklama:router.push, ya bir path string ya da bir location objesi kabul eder. { name: 'products' } verildiğinde router, name'i eşleşen route'u bulup çözümlenmiş path'ine navigasyon yapar — bu standart 'named route' navigasyon kalıbıdır, navigasyon kodunu literal URL string'inden ayırdığı için faydalıdır.
Vue Router State ManagementZorluk 2
router.beforeEach((to, from, next) => { ... })'ın amacı nedir?
  • aHer route değişikliğinden sonra çalışıp geride kalan DOM elemanlarını temizler
  • bYalnızca bir kez, uygulama ilk mount olduğunda çalışır
  • c<router-view>'ı özel render mantığıyla değiştirir
  • dHer navigasyondan önce çalışır, seni onu inceleme/yönlendirme/iptal etme imkanı verir (örn. auth kontrolü için)✓
Açıklama:Global bir beforeEach guard'ı, her navigasyon tamamlanmadan önce tetiklenir. 'Kullanıcı kimlik doğrulaması yapmış mı' gibi çapraz-kesen kontroller için standart yerdir — guard, devam etmek için next(), iptal etmek için next(false), ya da yönlendirmek için next('/login') çağırabilir.
Vue Router State ManagementZorluk 2
// pinia store
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  actions: {
    increment() { this.count++ }
  }
})

state seçeneği ne olmalı ve neden?
  • aDüz bir obje literal { count: 0 }, böylece Pinia onu değişmezlik için dondurabilir
  • basync bir fonksiyon, çünkü state her zaman sunucudan çekilir
  • cBaşlangıç state objesini döndüren bir fonksiyon, böylece her Pinia/store örneği yeni bir state objesiyle başlar✓
  • dBir computed() çağrısı, çünkü state başka reaktif kaynaklardan türetilmek zorundadır
Açıklama:Pinia'nın state seçeneği düz bir obje değil, bir factory fonksiyonu (() => ({...})) olmalıdır — bu, Vue component'lerinin data()'yı nasıl tanımladığını yansıtır. Factory, her Pinia/store örneğine yeni bir başlangıç state objesi verir; bu, her SSR isteği için yeni bir Pinia örneği oluşturulduğunda özellikle önemlidir. Aynı Pinia örneğinde aynı store'u kullanan component'ler ise o store'un state'ini bilinçli olarak paylaşır.

Uzmanlığa göre

Angular 450JavaScript 450React 450TypeScript 450Vue 450

Kıdeme göre

Frontend JuniorFrontend MidFrontend Senior

Diğer alanlar

BackendFullstackDevOps / CloudAI EngineerVeritabanıMobilGüvenlikQA / Test OtomasyonuData EngineerOyun GeliştirmeML Engineer

2925 soruluk Frontend bankasında kendini sına.

Mülakata başla