Vue.js (3) : Vue-router ile bir SPA Uygulaması

Vue.js ve vue.js ekosistemini anlatan yazı dizimize kaldığımız yerden devam ediyoruz. Angular ve reactjs frameworkleri ile bildiğiniz gibi SPA (Single Page Application) uygulamaları geliştirebiliyoruz. Vue ekosistemi aynı imkanı bize  sunmakta mıdır? Evet, vue-router ile bizde bir spa uygulaması geliştirebiliriz.

SPA Nedir ?

Açılımı ingilizce Single Page Application türkçeside tek sayfalık uygulama demektir. Böyle bir uygulama tek  bir html sayfasından oluşmaktadır. Tüm ekranlar, daha doğrusu arayüzler o tek sayfaya yükleniyor. Bu bize ne kazandırıyor diye soracak olursak; tüm sayfalar baştan aşağı yüklenmediği için, network kaynaklarını tüketmeyen, hızlı, performanslı interaktif uygulamalar geliştirebiliyoruz. Ortak olan sayfa bölümleri, javascript ve css dosyaları tekrar tekrar yüklenmediği için, daha az kaynak kullanan, daha hızlı uygulamalar elde etmiş oluruz.

Ayrıca SPA sayesinde desktop uygulamalarına benzer işlevsellikte uygulamalar elde etmiş oluruz. Facebook, instagram, gmail gibi uygulamaların sunduğu işlevselliği, kullanım kolaylığını düşünün. Her uygulamamızın spa olmasına gerek yok, fakat geniş bir kullanıcı kitlesini hedefliyor, işlevsellik, performans ve kullanışlı bir arayüz sunmak istiyorsanız uygulamanızı SPA olarak geliştirmenizde fayda var.

Vue ekosisteminde bir SPA uygulaması geliştirmek için vue-router kütüphanesini kullanmamız gerekiyor.

Basit Bir Örnek

Router yapısını kullanabilmek için vue’daki bileşen (component) mantığını uygulamamız gerekiyor. Yönlendireceğimiz ekranları bileşen olarak tasarlayacağız. Normal bildiğimiz çok sayfalı web uygulamalarında, tek tek oluşturmuş olduğumuz html sayfalar, spa uygulamasında birer bileşene dönüşmüş oluyor. Örneğin UrunListesi.html bir UrunListe bileşenine dönüşüyor. OdemeBilgisi.html, OdemeBilgisi bileşenine dönüşüyor.

Bildiğimiz web uygulamalarında, başka bir sayfaya erişmek için link koyuyorduk. Vue-router’da link ihtiyacını karşılayacak, router-link ifadesini kullanıyoruz.

index.html

router-link bileşeni navigasyon için kullanılıyor. to özelliğini kullanarak hangi sayfaya gideceğini belirtmiş oluyoruz. router-link, <a> tag’i olarak işlenir.

router-view bileşeni de sayfaların yükleneceği bölümü ifade ediyor. birincisayfa seçildiğinde, router-view’in içine birinci sayfa yüklenir. Aynı şekilde ikincisayfa seçildiğinde, ikincisayfa yüklenir.

app.js:

Navigasyon yapılacak tüm yollar routes array’inde tanımlanıyor. VueRouter objesine de bu arrayi geçirip, vue modeline de router objesini gönderince, uygulama bir spa uygulaması gibi davranmaya başlayacaktır.

Gelişmiş Bir Örnek

Vue-router, kullanımı ile ilgili bir uygulama yapacağız. Sırasıyla ürün listesinden ürün seçeceğiz, ödeme bilgilerini girereceğiz. Kargo firmasını seçip, onaylayacağız.

routerapp2

Tüm uygulamayı, jquery veya başka bir kütüphane kullanmadan, vue.js ve vue-router.js kütüphanelerini kullanarak yapacağız.

Bu örnekte navigasyonu, router-link bileşeni ile değilde, programatik olarak yapacağız. Önce ürün listesi (prodlist) bileşenini yapalım.

index.html

style.css

app.js

Dikkat edilmesi gereken nokta, router.push ifadesi ile ekran ilk açıldığında, prodlist (ürün listesi) ekranını yüklemiş oluyoruz. Adet girilir girilmez, tutar ve toplam tutar (total price) alanları otomatik olarak güncellenir.

Ödeme Bileşeni

İlk bileşeni yaptıktan sonra, ödeme (payment) bileşenini yapalım. Son kullanıcı ürün listesinden alacağı ürünleri seçtikten sonra, ödeme bilgilerini gireceği bir ekrana geçsin.

index.html

app.js

prodlist bileşenine routetopayment metodu ekledik, bu metod devam (Ödeme Bilgileri) butonuna tıklayınca, ödeme (payment) bileşeninin yüklenmesini sağlayacaktır.

Benzer mantıkla, shipment (kargo) ve approvement (onaylandı) bileşenlerini ekleyerek uygulamamızı tamamlamış oluruz. Dikkat ederseniz sayfalar arasında gidip gelebiliyor, ileri-geri yapabiliyoruz. Komple bir html sayfasının yüklenmesi yerine sadece ilgili bileşenler yükleniyor.

Uygulamanın bitmiş halini github üzerinden inceleyebilirsiniz.

Sonuç

Vue-router ile bir spa web uygulaması geliştirmek çok kolay. Vue.js ile birlikte gelmiş olan bileşen (component) yapısını kavradıktan sonra, son kullanıcıyı yönlendirmek istediğimiz, herhangi bir html sayfasını bileşen (component) haline getirip, dilediğimiz gibi ekranlar arasında dolaştırabiliriz.

Örnekte tüm navigasyon bileşenlerini tek bir dosyada app.js dosyasında tanımladık. Gerçek bir uygulamada böyle bir şey yapmak, doğru olmayacaktır. Bakım ve test anlamında verimsiz bir yapı oluşturacaktır. Bunun yerine yapılması gereken her bileşeni, kendi .vue uzantılı dosyasında tanımlamak ve webpack gibi bir araç kullanarak, uygulamaya entegre etmektir. Bir sonraki vue.js yazımızda böyle bir örnek yapmak üzere hoşçakalın.

 

Yorum Gönder

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Scroll to Top