Vue Router

Vue Router konusuna girmeden önce Vue,React ve Angular benzeri önyüz kütüphanelerinden önce hayatımızda olan Model View Controller(MVC) kavramına değinmek istiyorum.

Model-View-Controller

• Model: Kullanıcıya dönülecek sayfa datası
• View: Gösterilecek sayfa(jsp)
• Controller: İsteği yanıtlayıp Model’i oluşturan kod parçası

MVC mimarisinde websitesine gelen istekler sunucu tarafında ilgili Controller sınıfına yönlendirilir. Buradaki kod işlendikten sonra dönen datalar ve JSP templete kulanılarak görüntülenecek sayfa üretilir. Bu sayfa client(istemci) tarayıcısına cevap olarak gönderilir.

Bunu bir örnek ile açıklayalım. Spring MVC ile JAVA projelerinde sıradan bir Controller şöyle gerçeklenir:

SampleController.java

websitemiz/test adresine gelen istek ile getTestData() fonksiyonu çalıştırılır ve ModelAndView nesnesine eklediğimiz View olan “Sample.jsp” sayfası ile cevap dönülür.

sample.jsp

İstemciye sonuç olarak aşağıdaki sayfa iletilmiş olur.

Kullancıya dönülen sayfa

Single Page Application

Buna karşın günümüz önyüz JavaScript kütüphaneleri ise Single Page Application (SPA) mimarisi kullanılır. Bu yapıda sayfaya gelen istekler önyüz kodunda karşılanır. Önyüzde tüm statik içerik ve javascript bir bütün halinde client’a indirilir. İhtiyaç olan datalar ise AJAX çağrıları ile sunucudan elde edilip ön yüzde sayfa güncelleniyor.

VueJs kütüphanesi ile birlikte sayfa yönledirmeleri için Vue router bileşeni kullanılıyor.

Vue router kullanımı

Vuejs projemizde kullanabilmek için önce package.json dosyamızdaki “dependencies” kısmına eklememiz gerekiyor.

"dependencies": {
  "@vue/cli-plugin-babel": "4.1.1",
  "@vue/cli-plugin-eslint": "4.1.1",
  "@vue/cli-service": "4.1.1",
  "vue": "^2.6.11",
  "vue-router": "3.1.3" // vue-router paket tanımı
},

Ardından routes.js dosyamızı oluşturacağız. Bu dosyaya Vue ve VueRouter’ı import ediyoruz.

import Vue from "vue";
import VueRouter from "vue-router";

VueRouter bir plugin olduğu için Vue.use(VueRouter) şeklinde yüklenmesi gerekiyor.

Sonra yeni bir VueRouter nesnesi yartıyoruz. Buna nesnenin constractor’ına routes adında bir dizi ekleyip sayfalar ve path’lerinin dizi olarak göndereceğiz.

export default new VueRouter({
  mode: "hash",
  routes: [...]
});

Ben örnek olarak Home-page ve About-page adında iki sayfa oluşturdum. Bunları routes.js’de import etmemiz gerekiyor. Bu sayfalar ile ilgili path’leri routes parametresine ekliyoruz.

routes: [
         {path: "/",component: HomePage},
         {path: "/home",component: HomePage},
         {path: "/about",component: AboutPage}
]

Path’ler içerisine “/” path’ini de dahil ettik. Böylece kök sayfamıza gelen istekleri de istediğimiz yere yönledirebiliyoruz.

routes.js

Kurulum için yapılması gereken son adım main.js’ dosyasında Vue nesnesi yaratılırken VueRouter’da tanımladığımız path-sayfa dizisini router adında bir parametre olarak iletmek.

main.js — routes dizisini Vue instance’a iletiyoruz.

router-view

Kurulumuzu yaptıktan sonra bu sayfaların görüntüleneceği yeri belirlememiz gerekiyor. Bu amaçla App.vue dosyasında templete kısmına “router-view” tag’i ekliyoruz. Bu şeklide tanımladığımız path’lere gelen istek sayfalar bu tag içerisinde görüntüleniyor.

App.vue : router-view tanımı

router-link

Sayfalar içerisinde yönlendirme yapmak için templete içerisinde “router-link” tag’i şu şekilde kullanılıyor:

<a @click="routeToHomePage">Go to Home</a>

Home-page.vue : router-link ile yönlenme

router.push

Javascript kodundan yönlendirme yapmak da mümkün. Bunun için öncelikle routes.js dosyası <script> alanına import etmeliyiz. Kullanım örneği olarak About-page.vue sayfasında “Go to Home” satırında @click eventine bir javascript fonksiyonu çağrımı var.

<a @click="routeToHomePage">Go to Home</a>

routeToHome adını verdiğim fonsiyon içerisinde routes.push(“home”) çağırımı ile home sayfasına yönlenmek mümkün.

routeToHomePage() {
  router.push("home");
}

About-page.vue: router.push ile yönlenme

• Projenin kaynak kodunu github’da inceleyebilirsiniz.
• Proje demosunu web editorde görüntülemek için : CodeSandbox.io

Vue-router eklentisinin temel kullanımını inceledik. Sonraki yazımda Vuejs’de component’ler arası veri taşınması(state management) amacıyla kullanılan Vuex eklentisini inceleyeceğiz.

Kaynaklar:

Introduction | Vue Router

Spring MVC hello world example