Vue.js Router

3 min readSep 9, 2023

Yeni bir Vue.js yazısından selamlar, bu yazıdaki konumuz “Vue.js‘te url yönlendirmelerini nasıl yaparız ? “ Yani Router nediri ve nasıl kullanılırı inceleyeceğiz.

Vue.js Router’ın asıl amacı bize SPA (Single Page Application ) uygulama yazmamıza olanak sağlamasıdır. SPA, tek bir Html üzerinde bütün işlemleri yapmamız demektir. Bu da herhangi bir değişiklik yaptığımızda bütün sayfayı yenilemeden işlemi gerçekleştirme imkanı sunar ve bu da çok önemli olan performans için önemlidir. Router ile de tek sayfada yönlendirmelerimizi yapabiliyoruz.

İlk olarak router’ı vue projemize nasıl ekliyoruz ?

İsterseniz proje oluşturulurken Router’ı seçerek ekleyebilirsiniz veya yapmadıysanız terminalden npm install vue-router komutuyla projeye bu eklentiyi ekleyebilirsiniz.

src/main.js dosyasında aşağıdaki gibi ekli olması gerekiyor ve .use(router) kodunun da olması gerekir.

src dosyasının içerisinde bir router dosyası altında da yönlendirme işlemlerini yapılacağı index.js sayfası bulunmalı.

router/index.js sayfasında ‘vue-router’ edilir ve bir dizi içerisinde(router) eklenmek istenilen yönlendirme işlemlerinin bilgilerini burada belirtilir.

path: yönlendirilen sayfanın linkinin nasıl devam edeceği

name: binding gibi işlemler yaparken kullanılan key adı, kullanılması kolaylık sağlaması içindir.

component: bu linkte hangi view’ın çalştırılacağını belirtilen alan

Örneğin anasayfada bir yönlendirme işlemi(Navbar tarzında) yapalım. <router-link> etiketleri ile her sayfa için eklenir. Burada yukarda router/index.js sayfasında verdiğimiz name’ler ile yönlendirmeleri bağlıyoruz. Ya da direkt name kullanmadan path’te verilebilir.

<router-view> etiketi ile de tanımlanan componentlerin açılması sağlanır.

Vue.js projesine Router ekleme bu şekilde! Şimdi biraz da router ile gelen metodları ve birkaç kullanımı inceleyelim.

Router Metodları

Router’da sayfaları yönlendirmek için kolaylık sağlayan bazı metodlar vardır. Bunlar;

push(): istegimiz sayfaya yönlendirebiliyoruz bu method ile. Örneğin ‘Anasayfa’ diye bir yönlendirme yapmak istenirse kullanılabilir.
go(): go() metoduna -1 verildiğinde bir önceki sayfaya yönlendirir. 1 verildiğinde bu seferde bir sonraki sayfaya yönlendirir.

/:catchAll(.*)

Eğer url yanlış yazılırsa kullanıcıya hata göstermek yerine eşleşmediğinde her zaman bu sayfaya yönlendir işleminin yapılmasını sağlar.

Router Params Kullanımı

Senaryo, öğrencilerin listelendiği bir sayfada herhangi bir öğrenci ismine tıklandığında sadece o öğrencinin bilgilerini gösteren bir sayfaya gitmek olsun. Bu durumda linke o öğrencinin id’si ile gitmeliyiz ki arkada o öğrencinin bilgilerinin bulabileceğimiz bir key olsun. Bu da params ile yapılır. Params’ın kullanımı da route-link‘den $ ile ya da bir diğer yol params ile gönderilir.

Sonrada seçilen öğrenci bilgilerini göreceğimiz sayfada $route.params ile alınıp ekrana bastırılır.

Router ile Props Kullanımı

Daha önce Component ile ilgili yazımda görmüş olduğumuz alt componente veri gönderme işleminin yapılmasını sağlayan props yapısı Router ile de kullanılır.