routing

Nuxt.js vue'nin routing sisteminden farklı olarak bizlere klasör yapısı ile route işlemleri yapmamıza olanak sağlıyor. Bir uygulama çerçevesinden routing işlemini inceleyelim.

nuxt uygulaması oluşturmak için terminalimizi açıp aşağıdaki komutu çalıştırıyoruz.

yarn create nuxt-app <project-name>

Kurulum işlemi sırasında çeşitli sorular ile karşılaşabiliriz bu kısımları kendinize uygun olarak doldurup kurulumu tamamlayabilirsiniz. Kurulum sonrası proje yapımız aşağıdaki gibi olacaktır.

Nuxt.js'in bize sunduğu routing yapısını pages içerisinde kullanabiliriz. Projemizi ayağa kaldırmak için yarn dev veya npm run dev komutunu kullanabiliriz. (Kurulum esnasında hangisini seçtiyseniz onunla devam etmelisiniz.) Sunucumuz localhost:3000 portunda ayağa kalmış durumda.

Component adı ile route işlemi

Routing işlemine başlayalım. Pages klasörü içerisini açtığımızda index.vue adında bir componentin olduğunu göreceğiz. Bu component http://localhost:3000/ adresine giriş yaptığımızda render olan sayfamızdır. Nuxt.js pages klasörü içerisinde bu dosyayı arar ve eğer varsa routing işlemini otomatik olarak gerçekleştirir.

Aynı şekilde farklı bir isimde component oluşturursak otomatik olarak route işlemi gerçekleşecektir. Yani pages klasörü içerisinde about.vue componentini oluşturup http://localhost/about adresine giriş yaptığımızda about.vue componenti render olacaktır.

Klasör adı ile route işlemi

Tabii ki tüm componentleri bu şekilde pages klasörü içerisine yazmak proje ilerledikçe içinden çıkılmaz bir hal alacaktır. Bu yüzden klasörler ile de route işlemi yapabiliyoruz. pages dizinimiz içerisine contact adında bir klasör oluşturup onun içerisine index.vue componentini oluşturarak http://localhost/contact route'nu karşılayabiliriz. Bu klasörleme işlemini dallandırabiliriz. Örneğin contact klasörü içerisine direkt detail.vue veya detail klasörü oluşturup içerisine index.vue componenti oluşturarak http://localhost/contact/detail adresine gelen istekleri karşılayabiliriz.

Route üzerinden parametre alma

Vue ile route işleminde parametre almak için route oluştururken : ile alacağımız parametrenin adını belirtmemiz gerekiyordu. Nuxt.js bu durumu da pages klasörü içerisinde halletmemizi sağlıyor. Öncelikle blog adında bir klasör oluşturup içerine index.vue componentini tanımlayalım.

<template>
  <div>BLOG LİSTESİ</div>
</template>

<script>
export default {};
</script>

<style></style>

Bu component http://localhost:3000/blog adresine girdiğimizde render olacaktır. Şimdi blog/blog-adi şeklinde dinamik olan blog detay sayfamızı oluşturalım. Bunun için yapmamız gereken blog klasörümüz içerisinde _name adında bir klasör oluşturup içerisine index.vue tanımlamak. Bu işlemden sonra blog/ilber-ortaylı şeklinde göndereceğimiz tüm istekler bu componente düşecektir. Peki /'den sonraki name parametresini nasıl alacağız? Daha önceden vue kullananların bileceği üzere $route.params.name şeklinde değerimizi alabiliriz.

Peki bu değeri validate etmek istersek? Nuxt.js bu durumu düşünerek componentimiz içerisinde bulunan script taglarımız arasına tanımlayabileceğimiz nuxt.js'e özel validate() fonksiyonunu bizlere sunmuş. Bu fonksiyonu kullanarak gelen parametremizi validate işlemlerinden geçirip eğer beklediğimiz bir veri değilse return false yaparak sayfanın yüklenmesini engelleyebiliriz veya return true sayfamızı başarılı bir şekilde render edebiliriz.

Aşağıda _name klasörümüz içerisinde bulunan index.vue componenti içerisinde uyguladığım bir validate işlemi mevcut. Bu işlem name parametremin numeric bir değer olup olmadığını kontrol ediyor eğer numeric değilse true numeric ise false döndürerek validate işlemini sonlandırıyor.

<template>
  <div>
    <h1>BLOG BAŞLIĞI: {{ $route.params.name }}</h1>
  </div>
</template>

<script>
export default {
  validate({ params }) {
    let name = params.name
    return !/^-?\d+$/.test(name);
  },
};
</script>

<style></style>

false dönmesi durumunda default nuxt.js 404 sayfası render oluyor. Bu sayfayı özelleştirmek için layouts klasörü içerisine error.vue componentini oluştabilirsiniz. Bundan sonra hata durumlarında bu sayfa render olacaktır.

NOT: Eğer layouts klasörü projenizde yok ise proje ana dizinine oluşturmanız yeterli olacaktır. NOT: Tüm route işlemleri nuxt.js özel olmakla beraber vue'nun kendi routing yapısı da kullanılabilir. Nuxt.js routing sistemi basit veya orta düzey projelerde kolaylıklar sağlamaktadır. Büyük ölçekli projelerde tercih edilmeyebilir.