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.
Takımlar
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.
Takımlar
{{takim.ad}}
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.

Telif Hakkı:
Problemi Şikayet Et!HAKKIMDA
Yazılım Uzmanlığı konusunda 11 yılı aşkın süredir Türkiye'de Cumhurbaşkanlığı olmak üzere Kurumlara ve Tüzel kişilere; Yön verme, Yücelik Sağlama ve Büyüme gereksinimlerinden doğan Yazılım ihtiyaclarına çözümler sunmaktayım.
<html>
<body>
<h5>
Yazılım
&
Teknoloji
</h5>
<p>
Dünyasına
Hoş Geldiniz.
</p>
</body>
</html>
Son Eklenen Konular
Nginx Nedir, Nasıl Çalışır, Kurulumu, Hata ve Çözümü
03 Haziran, 2022
Web Site | Web Tasarım | Web Yazılım
27 Nisan, 2022
Html URL ASCII Karakter kodları
04 Mart, 2022
Jquery Alert, Sweet alert, Dialog Kullanımı
03 Mart, 2022
Doğal Seo Çalışması Nasıl Yapılır?
19 Şubat, 2022
En Çok Okunanlar
Google api key nasıl alınır?
26 Eylül, 2013
Youtube Video'sunu Gif Yapma Gif'e Çevirme
17 Ağustos, 2013
linux çeşitleri nelerdir?
13 Ağustos, 2013
Ajax ile sayfa yenilenmeden resim yükleme nasıl yapılır?
04 Ekim, 2013
Php ile bot nasıl yapılır?
22 Eylül, 2013
İlgili İçerikler
-
06 Aralık, 2021 841
Vuejs 3 Kullanımı. Nasıl Kurulur, Vue 3 Gelen Yenilikleriyle Nasıl Proje Geliştirilir?
-
15 Ağustos, 2021 3265
Nuxt.js Nedir? Nuxt.js Nasıl Kurulur? Nuxt.js ile Vue.js Projesi Nasıl Geliştirilir?
-
24 Temmuz, 2021 1041
Nodejs ReactJs Array functions Kullanım Yöntemleri
-
22 Temmuz, 2021 1336
React Nedir, Nasıl Kurulur, Reactjs Öğrenerek Proje Nasıl Geliştirilir?
-
01 Temmuz, 2021 2526
Nextjs kurulumu ve Nextjs ile React projesi nasıl yapılır?
-
19 Haziran, 2021 1222
javascript KDV Hesaplama İşlemleri