Vue.js

Vue3 router kullanımı

• Mehmet Bozkurt
• 8 Mayıs 2022 | 2 ay önce
• 64 Görüntülenme
• 0 Yorum

Vue 3 versiyonu ile farklı kod parçacıkları ve bazı kolaylıkları bize sundu. Bunlardan birisi ise router yapısında oluşan bazı farklılıklar. 

Vue 2 ile vue 3 arasında router işleminde oluşan değişiklik ve vue projenizde router nasıl kullanılır örnek vererek açıklamaya başlayalım.

Vue3vu ile artık new vue yapısı kalkmış oldu router tarafında ise yukarıdaki görselde gördüğünüz üzeri vue2 router yapısı bulunmaktadır.

Şimdi gelelim router kullanımına npm install vue-router paketimizi kuralım.

projemiz içerisine router.js isminde bir dosya oluşturalıım ve bir üst görseldeki gibi vuerouter import edelim.

Daha sonra main.js dosyamızda router aşağıdaki görselde gördüğünüz üzeri dahil edelim.

Aşağıdaki görselde sayfalar arası nasıl geçiş yapacağımıza ait örneği görebilirsiniz.

active-class: ile tıklanmaya göre active class atayacağınız css ile özelleştirebilirsiniz.

to: gidecek olan url adresini temsil eder.

tag: router-link tagını tag ile temsil ettirirsiniz yani burada tag="li" örneğini açıklayacak olursak yapısal olarak li tagı içerisinde Anasayfa yazmış oluyorum.

Aşağıdaki görselde ise creaated yani sayfa yüklendiğinde fonksiyon mantığı ile çalışır. 

this.route diyerek gidilen route bilgisini gösterir, mevcut görselde about sayfasına ait bilgileri console da görebilirsiniz.

$route.params.userId ise bu rotada gönderdiğim parametreye bu şekilde erişim sağlayabilirsiniz.