Vue.js’te Yönlendirmeye Giriş: Vue Router ile Uygulama Geliştirme

Yukarıdaki örnekte, etiketleri kullanıcıların “Anasayfa” ve “Hakkında” rotaları arasında gezinmesini sağlar. ise, / yolu eşleştiğinde HomeView bileşenini, /about yolu eşleştiğinde ise AboutView bileşenini gösterecektir.

Rota Tanımları ve Bileşenler

Rota tanımları, uygulamanızın hangi URL’ye hangi bileşeni eşleyeceğini belirleyen temel yapı taşlarıdır.

Temel Rota Yapısı

Her rota tanımı bir JavaScript objesidir ve genellikle şu özellikleri içerir:
* path: URL yolu (örneğin /, /about, /users).
* component: Bu yolla eşleştiğinde görüntülenecek Vue bileşeni.
* name: Rotaya verilen benzersiz bir isim (programatik navigasyon ve isimlendirilmiş rotalar için kullanışlıdır).
* redirect: Bir rotadan başka bir rotaya yönlendirme.
* children: İç içe rotaları tanımlamak için kullanılır.
* meta: Rotaya özel key-value çiftleri eklemek için kullanılır (örneğin kimlik doğrulama gereksinimi).

const routes = [
  { path: '/', component: HomeView, name: 'home' },
  { path: '/about', component: AboutView, name: 'about' },
  { path: '/contact', component: () => import('../views/ContactView.vue'), name: 'contact' } // Lazy loading örneği
];

Bileşenlerin Oluşturulması

Yukarıdaki rota tanımlarında kullanılan HomeView, AboutView ve ContactView gibi bileşenler, genellikle src/views klasöründe yer alır ve standart Vue bileşenleridir.

router-link ile Navigasyon

router-link bileşeni, to prop’u aracılığıyla hedef rotayı belirtir. to prop’u bir string veya bir obje olabilir.

Hakkında

İletişim

Kullanıcı 123

router-link otomatik olarak aktif olan rotaya router-link-active ve router-link-exact-active sınıflarını ekler, böylece navigasyon menülerinizde aktif öğeyi stilize edebilirsiniz.

router-view ile İçerik Gösterimi

router-view bileşeni, Vue Router’ın rotalarla eşleşen bileşenleri render ettiği yerdir. Uygulamanızda yalnızca bir ana router-view olabileceği gibi, iç içe rotalar için birden fazla router-view de bulunabilir.

Dinamik Rotalar (Dynamic Routes)

Çoğu uygulamada, belirli bir kimliğe veya parametreye göre değişen URL’lere ihtiyaç duyulur. Örneğin, bir kullanıcı profil sayfası /users/1, /users/2 gibi URL’lere sahip olabilir. Vue Router, dinamik rota segmentlerini destekler.

URL Parametreleri

Rota tanımında iki nokta üst üste (:) ile başlayan bir segment, dinamik bir parametre olarak kabul edilir.

const routes = [
  // ... diğer rotalar
  {
    path: '/users/:id',
    name: 'user',
    component: () => import('../views/UserDetail.vue')
  }
];

Bu rota tanımı, /users/123 veya /users/abc gibi URL’lerle eşleşir. :id kısmı, rotanın dinamik parametresidir.

Parametrelere Erişim

Bileşen içinde, mevcut rotanın parametrelerine useRoute() Composition API fonksiyonu veya this.$route.params (Options API) aracılığıyla erişebilirsiniz.

Yukarıdaki örnekte, userId reaktif bir referans olarak tanımlanır ve route.params.id değerini alır. Ayrıca, kullanıcı /users/1‘den /users/2‘ye aynı UserDetail bileşeni içindeyken geçtiğinde watch kullanarak userId‘nin güncellenmesini sağlıyoruz.

Props ile Parametreleri Bileşene Geçirme

Parametreleri doğrudan bileşenin prop’ları olarak geçirmek, bileşenlerin daha temiz ve yeniden kullanılabilir olmasını sağlar.
Rota tanımında props: true ayarlayarak tüm rota parametrelerini bileşene prop olarak geçirebilirsiniz:

const routes = [
  {
    path: '/users/:id',
    name: 'user',
    component: () => import('../views/UserDetail.vue'),
    props: true // :id parametresini UserDetail bileşenine prop olarak geçirecek
  }
];

Ardından, UserDetail.vue bileşeninizde id prop’unu tanımlayabilirsiniz:

Bu yaklaşım, bileşenin useRoute() bağımlılığını ortadan kaldırır ve onu daha test edilebilir hale getirir.

İç İçe Rotalar (Nested Routes)

Gerçek dünya uygulamalarında, kullanıcı arayüzleri genellikle hiyerarşik bir yapıya sahiptir. Örneğin, bir kullanıcı profil sayfasında “Profil”, “Gönderiler” ve “Ayarlar” gibi alt sekmeler olabilir. Vue Router, bu tür senaryolar için iç içe rotaları destekler.

children Özelliği

İç içe rotalar, bir rota tanımının children özelliğini kullanarak tanımlanır.

const routes = [
  {
    path: '/users/:id',
    component: () => import('../views/UserLayout.vue'), // Ana bileşen
    children: [
      {
        path: '', // Varsayılan alt rota (örneğin /users/1)
        name: 'user-profile',
        component: () => import('../views/UserProfile.vue')
      },
      {
        path: 'posts', // /users/1/posts
        name: 'user-posts',
        component: () => import('../views/UserPosts.vue')
      },
      {
        path: 'settings', // /users/1/settings
        name: 'user-settings',
        component: () => import('../views/UserSettings.vue')
      }
    ]
  }
];

Bu örnekte, /users/:id yolu UserLayout.vue bileşenini yükler. UserLayout.vue içinde, alt rotalar için bir daha bulunmalıdır.

Ana Bileşenin İçinde İkinci Bir router-view

UserLayout.vue bileşeni, ana tarafından yüklendiğinde, kendi içinde bir daha barındırarak alt rotaların içeriğini gösterecektir.

Bu yapı, karmaşık kullanıcı arayüzlerini daha modüler ve yönetilebilir hale getirir.

Programatik Navigasyon

Bazen, bir kullanıcı bir butona tıkladığında, bir form gönderildiğinde veya bir API çağrısı tamamlandığında olduğu gibi, programatik olarak bir rotaya gitmeniz gerekebilir. Vue Router, bu tür durumlar için çeşitli yöntemler sunar.

router.push(), router.replace(), router.go(), router.back()

* router.push(location): Yeni bir girişi tarayıcı geçmişine ekleyerek belirtilen location‘a gider. router-link‘e tıklamakla aynıdır.
* router.replace(location): Mevcut girişi tarayıcı geçmişinde location ile değiştirir, yani geri düğmesiyle önceki sayfaya dönemezsiniz.
* router.go(n): Tarayıcı geçmişinde n adım ileri veya geri gider. Pozitif bir sayı ileri, negatif bir sayı geri gider.
* router.back(): router.go(-1) ile aynıdır, bir adım geri gider.

Bu yöntemlere Composition API’da useRouter() hook’u aracılığıyla erişilirken, Options API’da this.$router aracılığıyla erişilir.

İsimlendirilmiş Rotalarla Navigasyon

Programatik navigasyon yaparken, rota yolları yerine rota isimlerini kullanmak daha güvenli ve esnektir. Yol değişse bile kodunuzu güncellemeniz gerekmez.

router.push({ name: 'user', params: { id: 123 } });

Query Parametreleri ve Hash ile Navigasyon

router.push ve router.replace yöntemleri, query ve hash özelliklerini de destekler.

// Query parametreleri ile: /search?q=vue&page=2
router.push({ path: '/search', query: { q: 'vue', page: 2 } });

// Hash ile: /about#section-2
router.push({ path: '/about', hash: '#section-2' });

Bu parametrelere bileşen içinde useRoute().query ve useRoute().hash ile erişebilirsiniz.

Yönlendirme Korumaları (Navigation Guards)

Yönlendirme korumaları, bir navigasyonun tamamlanmasını engelleyebilir veya yönlendirme sırasında ek eylemler gerçekleştirebilir. Genellikle kimlik doğrulama, yetkilendirme, veri çekme veya bir rotadan ayrılmadan önce kullanıcıdan onay alma gibi senaryolarda kullanılırlar.

Vue Router’da üç tür yönlendirme koruması bulunur:

Global Guards

* router.beforeEach(to, from, next): Her navigasyondan önce çağrılır. to ve from rota objeleri, next ise navigasyonu kontrol etmek için kullanılan bir fonksiyondur.
* router.afterEach(to, from): Her navigasyondan sonra çağrılır. Bu korumalar next fonksiyonunu almaz ve navigasyonu etkileyemezler, genellikle analitik izleme veya sayfa başlığı güncelleme gibi yan etkiler için kullanılırlar.

// src/router/index.js
router.beforeEach((to, from, next) => {
  const isAuthenticated = / Kullanıcının oturum açıp açmadığını kontrol et / true; // Örnek

  if (to.meta.requiresAuth && !isAuthenticated) {
    // Kimlik doğrulama gerektiren bir rotaya erişmeye çalışıyor ve oturum açmamış
    next('/login'); // Giriş sayfasına yönlendir
  } else {
    next(); // Navigasyona devam et
  }
});

Per-Route Guards (Rota Başına Korumalar)

Rota tanımının içinde beforeEnter özelliği kullanılarak belirli bir rotaya özgü korumalar tanımlanabilir.

const routes = [
  {
    path: '/admin',
    component: () => import('../views/AdminPanel.vue'),
    meta: { requiresAuth: true, requiresAdmin: true },
    beforeEnter: (to, from, next) => {
      // Sadece bu rota için özel bir kontrol
      const isAdmin = / Yöneticilik kontrolü / true; // Örnek
      if (isAdmin) {
        next();
      } else {
        next('/'); // Anasayfaya yönlendir
      }
    }
  }
];

In-Component Guards (Bileşen İçi Korumalar)

Bu korumalar, doğrudan bileşenlerin içinde tanımlanır ve belirli bir bileşene girerken, o bileşende kalırken veya o bileşenden ayrılırken tetiklenir.

* beforeRouteEnter(to, from, next): Bileşene girilmeden önce çağrılır. Bu sırada bileşen örneği henüz oluşturulmadığı için this‘e erişilemez. next callback’i içinde bir callback fonksiyonu ile bileşen örneğine erişilebilir.
* beforeRouteUpdate(to, from, next): Aynı rotanın farklı parametrelerle (örneğin /users/1‘den /users/2‘ye) güncellenmesi durumunda çağrılır. this‘e erişim vardır.
* beforeRouteLeave(to, from, next): Bileşenden ayrılmadan önce çağrılır. Kullanıcıya bir formu kaydetmediği konusunda uyarı vermek gibi senaryolarda kullanışlıdır. this‘e erişim vardır.

Gelişmiş Konular

Vue Router, temel yönlendirme ihtiyaçlarının ötesine geçen bir dizi gelişmiş özellik sunar.

İsimlendirilmiş Rotalar (Named Routes)

Rotalara isim vermek, programatik navigasyonu ve router-link kullanımını daha esnek hale getirir. URL yolları değişse bile, isimlendirilmiş rotaları kullanan kodunuzu güncellemeniz gerekmez.

const routes = [
  {
    path: '/user/:id',
    name: 'userProfile', // Rotaya isim verdik
    component: () => import('../views/UserProfile.vue')
  }
];

Navigasyonda kullanımı:

Kullanıcı 123

router.push({ name: 'userProfile', params: { id: 456 } });

İsimlendirilmiş Görünümler (Named Views)

Bazen aynı anda birden fazla router-view‘ı kullanarak karmaşık bir layout oluşturmak isteyebilirsiniz. İsimlendirilmiş görünümler, bunu mümkün kılar.

Rota tanımında, hangi router-view‘a hangi bileşenin yükleneceğini belirtirsiniz:

const routes = [
  {
    path: '/',
    components: {
      default: () => import('../views/HomeContent.vue'),
      header: () => import('../components/AppHeader.vue'),
      sidebar: () => import('../components/AppSidebar.vue'),
      footer: () => import('../components/AppFooter.vue')
    }
  },
  {
    path: '/about',
    components: {
      default: () => import('../views/AboutContent.vue'),
      header: () => import('../components/AppHeader.vue'),
      sidebar: () => import('../components/AppSidebar.vue')
      // Footer bu rotada gösterilmeyecek
    }
  }
];

Meta Alanları (Meta Fields)

Rota tanımlarına özel veriler eklemek için meta özelliğini kullanabilirsiniz. Bu veriler, yönlendirme korumaları içinde veya bileşenler içinde mevcut rotanın meta özelliğinden erişilebilir.

const routes = [
  {
    path: '/dashboard',
    component: () => import('../views/Dashboard.vue'),
    meta: {
      requiresAuth: true,
      title: 'Yönetim Paneli'
    }
  }
];

Bileşen içinde erişim:

import { useRoute } from 'vue-router';
const route = useRoute();
console.log(route.meta.title); // "Yönetim Paneli"

Yönlendirme Geçişleri (Route Transitions)

Rota değişiklikleri sırasında animasyonlar eklemek, kullanıcı deneyimini zenginleştirir. Vue’nun bileşeni ile Vue Router’ı entegre edebilirsiniz.

Bu örnekte, router-view‘ın içeriği değiştiğinde bir solma animasyonu (fade transition) uygulanır. mode="out-in" önce eski bileşenin kaybolup sonra yenisinin görünmesini sağlar.

Lazy Loading (Tembel Yükleme)

Büyük uygulamalarda, tüm rota bileşenlerini uygulamanın başlangıcında yüklemek, ilk yükleme süresini uzatabilir. Tembel yükleme (code splitting), bileşenleri yalnızca ilgili rotaya erişildiğinde yükleyerek bu sorunu çözer. Vue Router, dinamik import (ES modülleri) ile bunu kolayca yapmanızı sağlar.

const routes = [
  {
    path: '/',
    name: 'home',
    component: () => import('../views/HomeView.vue') // Sadece HomeView erişildiğinde yüklenecek
  },
  {
    path: '/about',
    name: 'about',
    component: () => import('../views/AboutView.vue') // Sadece AboutView erişildiğinde yüklenecek
  }
];

Bu şekilde, uygulamanızın başlangıç paketi (bundle) boyutu küçülür ve daha hızlı yüklenir.

Sonuç

Vue Router, Vue.js uygulamaları için vazgeçilmez bir yönlendirme çözümüdür. Basit kurulumu, sezgisel API’si ve kapsamlı özellik seti sayesinde, hem küçük hem de büyük ölçekli tek sayfalık uygulamaların yönlendirme ihtiyaçlarını eksiksiz bir şekilde karşılar. Temel rota tanımlarından dinamik rotalara, iç içe görünümlerden programatik navigasyona ve güçlü yönlendirme korumalarına kadar sunduğu yeteneklerle, geliştiricilere esnek ve kontrol edilebilir bir yönlendirme deneyimi sunar. Vue Router’ı öğrenmek ve ustaca kullanmak, Vue.js ile daha performanslı, daha organize ve daha kullanıcı dostu web uygulamaları geliştirmenin anahtarıdır. Bu makale, Vue Router’a sağlam bir giriş yaparak, kütüphanenin sunduğu temel ve gelişmiş özelliklere dair kapsamlı bir bakış açısı sunmayı amaçlamıştır. Daha derinlemesine bilgi ve en güncel kullanım örnekleri için her zaman resmi Vue Router dokümantasyonuna başvurmanız önerilir.