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.

Vuejs 3 öğrenmeye devam ediyoruz. Bir önceki (Vue 3 Gelen Yenilikleriyle Nasıl Proje Geliştirilir?) konumuzun devamı niteliğinde olarak vue 3 router işlemlerini burada anlatacağım. Hazırsanız başlayalım.

Vue 3 router kurulumu

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

        vue create vrouter
    
Vue 3 router kurulumu manually

 

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

Vue 3 router

 

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

vue js 3x

 

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

vue3 history mode router

 

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

vuejs 3 config file

 

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

vue 3 preset

 

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ı

vue 3 successfully

 

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.

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.

vuejs 3 takimlar

 

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.

takımlar urlimiz

 

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

Vuejs 3 routing işlemlerinin kodlarını github üzerinde paylaşıyorum. Detaylı incelemek isterseniz: Buyurun!
Creativecommons.org
Bu çalışmanın içeriği, Creative Commons Atıf 2.5 lisansı koşulları altında kullanılabilir . Bu çalışmanın daha fazla dağıtımı,paylaşımı: ismailgultekin(com)a ve çalışmanın başlığına, Kaynak vererek atıfta bulunulmalıdır.

Telif Hakkı:

Problemi Şikayet Et!
Web Yazılımları

Web Yazılımları

Conference Articles

Conference Articles

Evimde Gör

Mobil Uygulamalar

Özel Yazılımlar

Özel Yazılımlar

Orsam Ortadoğu

Orsam Ortadoğu

Haydi El Ele

Haydi El Ele

Makina Yazılımları

Makina Yazılımları

Soru Sor Whatsapp

Görüş Hata Bildir

Güvenlik Kodunuz:

Yorum Yap

Yorum kodunuz:

0.0482