Vue Router ile tek sayfa uygulama (SPA) mantığı

Nisan’da Vue.js ile ilk bileşeni yazmıştım. O günden bu yana birkaç küçük arayüz parçasında kullandım; reaktif yaklaşım hakkındaki olumlu izlenimim devam ediyor. Bu sefer daha büyük bir adım: Vue Router ile tam bir tek sayfa uygulama (Single Page Application — SPA) mantığını kurmak.

SPA, tüm sayfa geçişlerinin tarayıcı tarafında gerçekleştiği yaklaşımdır. Sunucu yalnızca başlangıçta tek bir HTML dosyasını ve gerekli varlıkları (JavaScript, CSS) gönderir; bundan sonraki tüm navigasyon JavaScript tarafından yönetilir. Sayfa yenilemesi olmaz, geçişler hızlıdır.

Vue Router nedir?

Vue Router, Vue.js için resmi router kütüphanesidir. URL ile bileşen arasındaki eşleştirmeyi sağlar. npm ile kurulabiliyor:

npm install vue-router

Temel kurulum

Önce component’leri tanımlıyorum — her “sayfa” bir Vue component’i:

// components/Anasayfa.js
var Anasayfa = {
    template: '<div><h2>Hoşgeldiniz</h2><p>Ana sayfa içeriği.</p></div>'
};

// components/Hakkimda.js
var Hakkimda = {
    template: '<div><h2>Hakkımda</h2><p>Bu benim sayfam.</p></div>'
};

// components/UrunDetay.js
var UrunDetay = {
    template: '<div><h2>Ürün {{ $route.params.id }}</h2></div>'
};

Sonra route’ları tanımlayıp router’ı oluşturuyorum:

var rotalar = [
    { path: '/',              component: Anasayfa   },
    { path: '/hakkimda',      component: Hakkimda   },
    { path: '/urunler/:id',   component: UrunDetay  }
];

var router = new VueRouter({
    routes: rotalar
});

var uygulama = new Vue({
    router: router,
    el: '#uygulama'
});

HTML tarafında <router-view> etiketi, aktif bileşenin nereye render edileceğini belirtiyor:

<div id="uygulama">
    <nav>
        <router-link to="/">Anasayfa</router-link>
        <router-link to="/hakkimda">Hakkımda</router-link>
    </nav>

    <router-view></router-view>
</div>

<router-link> etiketi standart <a> yerine kullanılıyor — bağlantıyı sayfayı yenilemeden yönetiyor.

URL modu: hash ve history

Varsayılan modda URL’ler /#/hakkimda biçiminde görünüyor. Bu hash modudur; sunucu yapılandırması gerektirmez çünkü hash kısmı sunucuya gönderilmez.

Temiz URL’ler (/hakkimda) için history modu kullanılıyor:

var router = new VueRouter({
    mode: 'history',
    routes: rotalar
});

Ama bu modda sunucu tarafında bir düzenleme gerekiyor: tüm isteklerin index.html’e yönlendirilmesi. Nginx’te şöyle bir yapılandırma gerekiyor:

location / {
    try_files $uri $uri/ /index.html;
}

Bu olmadan /hakkimda adresine doğrudan gidildiğinde sunucu 404 dönüyor. Apache için de benzer bir .htaccess kuralı gerekiyor. Bu sunucu yapılandırmasını ilk seferinde atlayıp “neden çalışmıyor?” diye zaman harcadım — SPA’yı ilk kez kuran biri için sıkça yaşanan bir tuzak.

Dinamik rota parametreleri

Ürün detay sayfası gibi dinamik rotalarda parametre almak için :id sözdizimini kullanıyorum:

var UrunDetay = {
    template: '<div>Ürün ID: {{ urunId }}</div>',

    computed: {
        urunId: function () {
            return this.$route.params.id;
        }
    },

    created: function () {
        // Sayfa yüklenince veri çekebiliriz
        console.log('Ürün ID:', this.$route.params.id);
    }
};

this.$route.params.id ile URL’deki :id değerine erişiyorum. Bileşen içindeki herhangi bir metottan ya da hesaplanmış özellikten bu değere ulaşabiliyorum.

Dinamik rotalarda dikkat ettiğim bir nokta: aynı bileşen farklı parametrelerle yeniden kullanıldığında Vue bileşeni yeniden oluşturmuyor — parametreler değişiyor. Bu yüzden created kancası yalnızca ilk yüklemede çağrılıyor. Parametre değişikliğini yakalamak için $route’u izlemek (watch) gerekiyor; bunu ilk başta gözden kaçırdım ve veri güncellenmiyor diye uzun süre aradım.

Navigasyon: programatik yönlendirme

Bazen bir işlem tamamlandıktan sonra programatik olarak yönlendirmek gerekiyor — örneğin form gönderiminin ardından:

var UrunEkle = {
    template: '<button @click="kaydet">Kaydet</button>',

    methods: {
        kaydet: function () {
            // Kaydetme işlemi...

            // Ürün listesine yönlendir
            this.$router.push('/urunler');
        }
    }
};

Gözlemlerim

Vue Router ile SPA kurmak düşündüğümden kolay oldu. Bileşenler ile rotalar arasındaki bağ temiz ve anlaşılır.

Bazı durumlar hâlâ kafamı karıştırıyor: birden fazla parametreli rotalar, nested routes, geçiş animasyonları. Bunları ayrıca incelemem gerekiyor.

Sunucu taraflı render (server-side rendering) konusu da var — SEO için önemli. Şu an için küçük bir yönetim paneli üzerinde SPA mantığını deniyorum, SEO önemli değil. Ama kamuya açık bir uygulama için bu meseleye bakılması gerekiyor.

Vue Router, Vue ekosistemi içinde mantıklı bir sonraki adım. Reaktif bileşenler ile yönlendirmeyi bir araya getirince gerçek bir uygulama iskeleti oluşuyor.