Vuejs 3 Routing İşlemleri Ve Router Kullanımı

Vuejs 3 routing işlemleri ile router kullanımını: Router link, router yönlendirme, router parametleri, route params, hata sayfası konularını sizler için tüm detaylarıyla derledim.

Vue 3 router kurulumu

Terminalden kurulum komutlarımız ile adımlarımızı başlatalım. Kodumuz

        vue create vrouter
    

Kurulum başladıktan sonra bize lütfen ön ayar seçmemizi soracak. "manually select features" Seçimiyle devam edelim.

Karşımıza çıkan seçeneklerden router işaretli olarak enter'a basalım. Sonra 3x seçerek entera basmamız gerekiyor.

Karşımıza çıkan history mode router sorusuna yes diyerek enter'a basalım.

Sonrasında karşımıza çıkan config files seçili iken entera basalım.

Karşımıza çıkan preset for futures sorusuna no diyerek kurulumun tamamlanmasını bekleyelim.

Kurulum tamamlandıysa "Successfully created project vrouter" sonucunu alırsınız.

Kurulumunu tamamladığımız projemizi ayağa kaldıralım.

        cd vrouter
        npm run serve
    

Vuejs 3 Router Klasör Yapısı

Klasör yapısını incelediğimizde src içinde router klasörünü göreceksiniz. İçerisinde index.js dosyasında createRouter ve createWebHistory ile vue-router başlatıldığını altında routes yapısını göreceksiniz.

main.js dosyamızda router import edilerek use router olarak kullanıldığını göreceksiniz. App.vue dosyamızda router-view ile yönlenen componentler artık proje içerisinde yer alacak.

Vuejs 3 Router Link Kullanımı

Vue 3 router link kullanımında App.vue dosyamız içinde örnek kullanımı mevcut to ile gideceği yeri belirliyoruz. Bunu yaparken src > router > index.js dosyamızda routes bölümünde path ve name alanlarıyla belirlenip yönlendiğini görebilirsiniz.

        Home |
        About
    

2 adet sayfa yapımız var. router link kullanarak yeni bir url ve gideceği sayfayı oluşturalım. Öncelikle wiews klasörü içinde Takims.vue adında bir dosya oluşturalım. İçine kodlarımızı yazalım.

sonrasında router > index.js dosyamızda takımlar sayfasını import edelim ve routes yapısını belirleyelim

        import Takimlar from '../views/Takims.vue'
        //const routes bölümüne aşarıdaki kodumuzuda dahil edelim.
        {
            path:'/takimlar',
            name:'Takimlar',
            component:Takimlar,
          }
    

Son olarak app.vue dosyamızda takimlar router linkini dahil ederek kullanımına acalım.

        Home |
        About |
        Takımlar
    

Tarayıcıdan projemizi açtığımızda home,about ve takımlar menümüz ekranda olacaktır.

Tarayıcımızdan /takimlar urline tıkladığımızda bizim belirlediğimiz sayfa acılacaktır. views > Takims.vue dosyamızı biraz daha düzenleyelim.

Url'den /takimlar sayfamızı yenileyerek tarayıcıdan kontrol edelim.

Vue3 routing işlemlerinde router yapısını bu şekilde gayet basit olarak yapabiliyoruz.