#vueogreniyoruz: Vue Router Kullanımı

Merhaba Arkadaşlar,

Sıradaki konu içeriğinde vuejs’in routing işlemleri için geliştirdiği vue-router üzerine çalışmalar yapacağız. Vue Router, backend ihtiyacı duymadan sayfalarımızın url yapılarını yönetebileceğimiz bir eklentidir. Hazırlayacağımız yapıda url’i statik olarak verebileceğimiz gibi makale detay sayfası gibi tek şablondan yöneteceğimiz sayfalar için dinamik url yapıları da oluşturabiliriz. Uygulamamıza geçip pekiştirerek görelim.

İlk olarak terminale aşağıdaki komutu yazarak eklentinin kurulumunu sağlayalım.


npm install vue-router

Kurulum yapıldıktan sonra src klasörü altında bulunan main.js sayfasını editörde açalım ve aynı Vue’nun import edildiği şekilde bir alt satırına VueRouter’ı import edelim. Vue’nun import’u ile alt alta yazıyorum:


import Vue from 'vue'
import VueRouter from 'vue-router'

Daha sonra import satırlarının altına aşağıdaki satırı ekleyelim:


Vue.use(VueRouter)

Bu satır, üstte import ettiğimiz Vue’nun VueRouter isimli eklentisini kullanacağını belirtiyor. Artık routing işlemlerimiz için bir değişken oluşturup VueRouter’dan kalıtım alarak düzenlemelerimizi yapabiliriz. Son yazdığımız satırın altına aşağıdaki gibi bir kod bloğu ekleyelim:


const router = new VueRouter({
  mode: 'history',
  routes: [
    {path: '/', component: Home},
    {path: '/iletisim', component: Contact},
    {path: '/yazi-detay/:id', component: PostDetail}
  ]
})

– router isminde, const tipinde(içeriği bir kere verilip değiştirilmeyeceğini gösterir) bir değişken oluşturduk.
– Bu değişkenin yeni bir VueRouter nesnesi olacağını belirttik ve parantezler içerisine özelliklerini yazdık.
– mode: ‘history’ yazan satırda url’de normal şartlarda oluşan ‘#’ işaretini kaldırdık. Ve okunurluk açısından daha doğru bir url olmasını sağladık. ‘#’ işaretini görmek için bu değeri kaldırırıp test edebilirsiniz.
– routes isminde bir array oluşturduk ve içerisine üç adet object tipinde değer ekledik. Her bir satırın içerisinde path ve component değerlerini ekledik.
– path değeri içerisinde hangi url’e gittiğimizde bu routing satırının çalışması gerektiğini yazdık. Örneğin ‘/iletisim’ sayfasına gittiğimizde ikinci satırın çalışması gerekiyor.
– Son satırda ‘/yazi-detay/:id’ path değerini verdik. Sondaki ‘:id’ parametresini url’den alacağız. View içerisinde bir kontrol yazarken örneğin ‘/yazi-detay/5’ url’i kullanılarak sayfamıza ulaşılmış ise ‘5’ rakamına göre api’den yazıyı çekip ekrana göndereceğiz. ‘id’ değeri bizim isteğimize göre değişebilir. Örneğin ‘:bilgisayaci’ şeklinde de kullanabiliriz. Tek zorunluluğumuz router değişkeni içerisinde yazan değer ile view içerisinde kullandığımız değerin aynı olmasıdır. Yani burada ‘id’ yazdıysak view içerisinde de ‘id’ ismiyle çağırmalıyız.
– Her object’in içerisinde bir de component değeri verdik. Component değeri de oluşturduğumuz view’ları gösterir. Ben anasayfa için Home.vue isminde bir sayfa oluşturmuştum. ilk satırda da component değerini Home vererek bu url’de görünmesi gereken view’ın Home.vue olması gerektiğini yazmış oldum.

Küçük bir hatırlatma: router değişkenini ekledikten sonra sayfayı kaydettiğimizde hata alırız. Çünkü component değerlerine yazdığımız sayfaları main.js içerisine import etmedik. Yukarıda Vue, VueRouter’ı import ettiğimiz satırların altına tüm component’ları import edelim:


import Home from './components/Home.vue'
import Contact from './components/Contact.vue'
import PostDetail from './components/PostDetail.vue'

Bu sayfada yapacağımız son bir işlem kaldı. En altta Vue instance’ı alınarak oluşturulan ve seçici elemanını, component’ını vs. kullanan, projenin nasıl hareket etmesi gerektiğinin yazılı olduğu satırlara router değişkenini eklememiz gerekiyor. Normalde şu şekilde olan kod bloğunu:


new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})

Aşağıdaki gibi güncelleyelim:


new Vue({
  el: '#app',
  components: { App },
  router: router,
  template: '<App/>'
})

Eğer istersek ‘router: router’ satırını ‘router’ şeklinde de yazabiliriz. Sayfa compile edilirken eşittirin iki tarafındaki değerler aynı ise bunu tek parametre içerisinde de algılayabilir.

Artık view’lara geçebiliriz. Son paylaştığım kod bloğunda da görüldüğü gibi App.vue bizim projemizin yönetildiği component’tır. Proje içerisinde genel bir yönlendirme, değişiklik yapmamız gerekirse bunun yönetimini App.vue içerisinden yapmalıyız. Uygulamamızda kullanacağımız routing işlemleri için de App.vue component’ını kullanacağız.

App.vue template’ini şu şekilde güncelliyoruz:


<template>
  <div id="app">
    <router-view />
  </div>
</template>

Eklediğimiz router-view satırı, sayfa geçişlerinde üretilecek yeni içeriğin ekleneceği alanı gösterir. Örneğin header’ı ve footer’ı sabit bir yapımız var ise #app içerisine header ve footer’ı ekleyip ikisinin arasına router-view’ı ekleyerek yalnızca bu alanın değişmesini sağlayabiliriz. Çağırılan view’lar içerisinde de hiç bir zaman bu iki component’ı kullanmayız.

router-view’ı ekledikten sonra Home.vue template’ine ‘Home Page’ , Contact.vue template’ine ‘Contact Page’ yazalım. Ardından projenin ana sayfasına girelim. ‘Home Page’ yazısını göreceğiz. Url’i değiştirip ‘/iletisim’ sayfasına girersek ‘Contact Page’ yazısını göreceğiz.

PostDetail.vue sayfasında gelen id değeri ile birlikte bir görünüm sağlayalım. Template’i aşağıdaki gibi düzenlediğimizde sayfaya gelen id değerini görebiliriz:


<template>
  <div>
    Post Detail Page
    <hr>
    ID => {{$route.params.id}}
  </div>
</template>

$route.params değeri standart bir kullanımdır. Gelebilecek farklı parametreler için sondaki id değerini değiştirmemiz yeterli olur. Artık ‘/yazi-detay/1’ url’ini açtığımızda sayfa içerisinde ‘ID => 1’ yazar. Örneğin; 1 id’sine sahip yazıyı çekmek istiyorsak bir method oluşturup $route.params.id ile gelen değeri api’ye gönderip gelen sonuca göre sayfayı çizebiliriz.

Not: Bu ders içeriğinde kullanılan dosyaları görüntülemek için tıklayınız

Reklam

Tüm Yorumlar

Leave a Reply

Your email address will not be published. Required fields are marked *