İçeriğe geç

Nuxt 3 İçinde Custom Route Kullanımı

Bildiğiniz gibi Nuxt 3 klasör yapısını rota olarak kullanıyor. pages/ klasöründeki dosyalara doğrudan rota olarak ulaşabiliyoruz. Örneğin pages/example.vue dosyamıza site.com/example adresinden doğrudan ulaşabiliriz. Bu yöntem her ne kadar büyük kolaylık sağlasa da ben kendi projelerimde rotaların benim kontrolümde olmasını tercih ederim.

Temiz bir örnek olması için boş bir Nuxt 3 projesi ile çalışmalara başlayalım. Siz kendi projenizde gerekli değişiklikleri uygun yerlerde yaparsınız.

Öncelikle projeyi oluşturalım.

Ardından app.vue dosyamızı aşağıdaki gibi değiştirelim.

Böylelikle pages/ klasöründeki dosyaların okunmasını sağlamış olduk.

Şimdi de sayfalarımızı oluşturalım. Öncelikle pages/index.vue dosyamızı oluşturalım ve içeriğini yazalım.

Ardından pages/test.vue dosyamızı oluşturalım ve içeriğini yazalım.

Şu anda dosya bazlı rota sisteminden dolayı proje hatasız çalışıyor olmalı. Sayfalar arasında geçiş yapmayı deneyebilirsiniz.

Şimdi de rota altyapısını değiştirmeye geçelim. Ben rotaları ayrı bir dosyada tanımlamak istediğim için öncelikle projenin kök dizinine routes.js adında bir dosya oluşturuyorum. Siz de oluşturun ve aşağıdaki içeriği ekleyin.

Ardından nuxt.config.ts içinde aşağıdaki gibi değişiklik yapın.

Bu işlemleri tamamladıktan sonra anasayfa ve test sayfamız hâlâ çalışıyor olmalı.

Eğer isterseniz app.vue içeriğini aşağıdaki gibi değiştirerek mevcut rotaları görebilirsiniz.

Son olarak index.vue içindeki NuxtLink satırını değiştirelim ve rota ismi ile yönlendirme yapalım.

Bunun yerine;

Bunu yazalım.

Böylelikle hem rotaların routes.js içinde tanımladığımız rotalar ile çalıştığını hem de isim ile rotaları çağırabildiğimizi görmüş olduk. Artık sayfalarımızı istediğimiz gibi alt klasörlere koyarak istediğimiz rotaları yazıp ulaşabiliriz.

Faydalı olması dileğiyle..

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

Kategori:Nuxt

İlk Yorumu Siz Yapın

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

11 + sixteen =