Vue Router – Başlangıç Seviyesi

Vue Router için en az iki yazı yazmayı planlıyorum. Bir tanesi basit manada başlangıç aşamasında kolayca Vue Router yapısını anlayabilmenizi hedefleyecek. Bir sonraki ise, daha kapsamlı olacak. Öyle ki bir önceki yazıda Router klasörünüzün bir hayli kalabalık olabileceğini söylemiştim. Yani sitenizde onlarca ve hatta yüzlerce sayfa olacaksa, daha kapsamlı ve ölçeklenebilir bir routing yapısını projeye başlamadan önce kurmanız gerekecek.

Vue Router Ne İşe Yarar?

Vue Router sayesinde domain.com/sayfa1, domain.com/sayfa2 gibi URL’leri kolaylıkla oluşturabilirsiniz. Eğer daha önceden ASP.Net ya da PHP vb. back end teknolojileri kullandıysanız, onların kendilerine has bir router yapılarının olduğunu bilirsiniz.

Vue.Js ile SPA (Single Page Application) kurgusunu uygulayacağımız için Router’a muhtaç durumdayız ancak bu durum Vue’nun en güzel artılarından bir tanesidir.

Single Page Application

Günümüz popüler front end JavaScript frameworkleri genellikle Single Page Application (SPA) mimarisi kullanılır. Bunun en önemli sebebi ise sayfayı tekrardan gereksiz yere render etmeden sadece değişen kısımları güncelleyerek kullanıcıya göstermek diyebilirim.

SPA yapısında kullanıcılar sitenize girdiğinde tüm içerikler tarayıcılarına indirilir. Buraya kadar eski düzenden bir farkı elbette yok ancak asıl olay şurada başlıyor. Siz bir select ile şehirlerin verilerini göstermek isterseniz, seçiminizi yaptıktan sonra tüm sayfayı tekrar getirmeniz gerek kalmayacak. Sadece gerekli bölgeler değişecek ve gereksiz yere kullanıcılarla sunucular arasında veri aktarımı olmayacak.

İhtiyaç halinde bölgesel değişikliklerin yapılabilmesi için ise Ajax (Asynchronous JavaScript and XML) devreye giriyor.

Ajax Nedir?

AJAX (İngilizce: Asynchronous JavaScript and XML, Türkçe: Eşzamansız JavaScript ve XML), İnternet sayfalarında JavaScript ve XMLHttpRequest kullanımı ile etkileşimli uygulamalar yaratan tekniğin adıdır. {Kaynak: Wikipedia / AJAX (Programlama)}

Örnek Bir Router Dosyası

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
    { path: '/tasarim', name: 'Home', component: Home },
    {
        path: '/tasarim/about',
        name: 'About',
        component: () =>
            import ('../views/About.vue')
    }
]

const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes
})

export default router

Üst kısımda çok basit bir şekilde domain.com/tasarim adresi çağırıldığında diyoruz ki sen git bana views klasörünün altındaki Home.vue dosyasını getir.

Dikkat ederseniz Home ve About sayfalarının import edilmeleri farklı görünüyor. Ancak ikisi de aynı işi yapıyor. Sadece yazılışları farklı ancak ben 2. alternatifi tercih ediyorum. Çünkü import edilen dosyalar arttıkça işler kesinlikle karışacaktır. Neyin nerede import edildiğini ve nasıl import edildiğini sürekli takip etmeniz gerekecektir.

Vue Router Kurmak

Eğer ilk projemizdeki gibi projeyi oluştururken Vue Router’ı seçmediyseniz,

npm install vue-router — save

konsolu açıp üst kısımdaki kodu yazarak projenize Vue Router’ı ekleyebilirsiniz.

Vou Router ve Dinamik URL Yapıları

Yukarıdaki Home ve About örneklerinde statik sayfaları çağırdık. Peki ya dinamik sayfalar oluştururken ne yapacağız? Örneğin adres satırında yer alan ID’lere göre sayfanızın oluşmasını istiyorsanız ne yapmanız gerekiyor?

const routes = [

    {path: '/sayfa/:id', component: () => import('../views/sayfa.vue')}

    { path: '/tasarim', name: 'Home', component: Home },
    {
        path: '/tasarim/about',
 name: 'About',
 component: () =>
            import ('../views/About.vue')
    }
]

İşte bu kadar…

path: ‘/sayfa/:id’ burada diyoruz ki eğer domain.com/sayfa/1 adresine gidersen bana views klasörünün altındaki sayfa.vue dosyasını getir. Peki Id‘yi yani 1 sayısını nasıl yakalayacağız?

Vue.JS ve Querystring

Sayfa.vue dosyasını şu şekilde oluşturalım mı?

<template>
	<div id="Sayfa">
		ID = {{ $route.params.id }}
	</div>
</template>

Projenizi çalıştırdığınızı ve adresinin de localhost:8080 olduğunu düşünerek localhost:8080/sayfa/1 adresine gittiğinizde karşınıza nasıl bir sayfa geliyor?

ID = 1

Bu sonucu görüyorsanız süper, dinamik URL oluşturma konusunda iyi gidiyoruz demektir.

Yukarıdaki {path: ‘/sayfa/:id’, component: () => import(‘../views/sayfa.vue’)} örneğinin yanı sıra bu kullanımları querystring olarak da çoğaltabilirsiniz.

{path: ‘/ozelsayfa?id=:id’, component: () => import(‘../views/ozelsayfalar.vue’)}

Vue.JS Sayfalarda Querystring’i Öğrenmek

Örneğin şöyle bir URL’iniz var: http://domain.com?deneme=123

console.log(this.$route.query.deneme) // çıktı: 123

üst kısımdaki kodu sayfanız içerisinde <script> tagleri arasına yazdığınızda console’da 123 yazdığını göreceksiniz.

Vue.JS’te Router View Kullanımı

İlk projemizi oluşturduktan sonra App.vue dosyanıza baktığınızda siz de buna benzer bir yapı göreceksiniz. Ben dosya tamamen temizleyip bu kodları yazdım. Asıl maksadımız burada <router-view>’in ne olduğunu anlamak ve kullanmaya başlamak olacak.

Normalde linklerimizi nasıl oluşturuyoruz? <a href=”http://www.mustafacagri.com/”>Anasayfa</a> peki şimdi nasıl oluşturacağız?

<router-link to=”/”>Anasayfa</router-link> şeklinde linklerimizi oluşturarak, açılan sayfaların APP.vue dosyamızda belirttiğimiz <router-view></router-view> tagleri arasında dönmesini sağlıyoruz. Bir nevi <iframe> olarak da düşünebilirsiniz bunu. Yani, href=”” arasına yazdığınız URL’leri artık <router-link to=””> arasına yazıyorsunuz. Ayrıca domain bağımsız olarak linklerinizi yazmalısınız. Gördüğünüz üzere href ile yazarken http://www.mustafacagri.com/ yazdım ama router-link ile yazarken sadece to=”/” olarak kullandım.

Bunun nedeni ise projemizin SPA olarak yayınlanmasını istiyoruz. Single Page Application’ın güzel yanlarına ise üst kısımda değinmiştik. Sizce de bu şekilde kullanmak daha iyi değil mi?

router.push

Henüz Vue Instance’ı içerisinde methods’lara değinmedim ancak router.push için basit bir method / fonksiyon oluşturuyorum.

<template>
	<div id="Sayfa">
		ID = {{ $route.params.id }}
		<button @click="RouterPushKullanimi()">Router Push Kullan!</button>
	</div>
</template>

<script>
	import router from './router'

	export default {
		methods: {
			RouterPushKullanimi: function(){
				router.push("home")
			}
		}
	}
</script>

router.push sizce ne işe yarıyordur? Basit bir yönlendirme yapmanıza yarıyor. Biz bu kod yardımıyla butona tıklanıldığı zaman localhost:8080/home sayfasına yönlendirilmiş olacağız. Bunu sadece methodlar içerisine yazmanız da şart değil. Gerektiği yerde rahatlıkla kullanabilirsiniz. Ancak, en önemli konu router dosyanızı import etmeniz gerekiyor. Dosyanızın nerede olduğuna göre değişebileceğini de belirterek, dosya yolunu doğru girmenizi öneriyorum. “../router”, “../router.js” vb. gibi.

Vue.JS’te routing işlemlerinin nasıl yapılacağını giriş seviyesinde görmüş olduk. Muhtemelen kendiniz de bu yapıları biraz daha geliştirip deneme yanılma yöntemiyle ilerleyebilirsiniz. Daha kapsamlı routing işlemlerine ise ilerleyen günlerde değineceğim.

Bir sonraki yazıda görüşmek üzere…