Vue Router'ı kullanarak Vue uygulamanız için sağlam bir yönlendirme sistemi kurun.

Vue için resmi yönlendirici olan Vue Router, Vue'da Tek Sayfa Uygulamaları (SPA'lar) oluşturmayı mümkün kılar. Vue Router, web uygulamanızın bileşenlerini farklı tarayıcı yollarıyla eşlemenize, uygulamanızın geçmiş yığınını yönetmenize ve gelişmiş yönlendirme seçeneklerini ayarlamanıza olanak tanır.

Vue Router'a Başlarken

Vue Router ile başlamak için aşağıdakileri çalıştırın npm (Düğüm Paket Yöneticisi) Vue uygulamanızı oluşturmak için tercih ettiğiniz dizinde komut:

npm create vue

Vue Router'ın eklenip eklenmeyeceği sorulduğunda Tek Sayfa Uygulaması geliştirme, seç Evet.

Ardından, projenizi tercih ettiğiniz metin düzenleyicide açın. Uygulamanızın kaynak dizin bir içermelidir yönlendirici dosya.

bu yönlendirici klasör evleri bir index.js uygulamanızdaki yolları işlemek için JavaScript kodunu içeren dosya. bu index.js dosya iki işlevi içe aktarır vue-yönlendirici paket: oluşturYönlendirici Ve WebTarihi oluştur.

instagram viewer

bu oluşturYönlendirici işlevi, bir nesneden yeni bir yol yapılandırması oluşturur. Bu nesne şunları içerir: tarih Ve rotalar anahtarlar ve değerleri. bu rotalar key, yukarıdaki resimde görüldüğü gibi, her rotanın yapılandırmasını detaylandıran bir dizi nesnedir.

Rotalarınızı yapılandırdıktan sonra, bunu dışa aktarmanız gerekir. yönlendirici örneğini açın ve bu örneği şuraya aktarın: ana.js dosya:

import'./assets/main.css'
import { createApp } from'vue'
import App from'./App.vue'
import router from'./router'


const app = createApp(App)


app.use(router)
app.mount('#app')

ithal ettiniz yönlendirici içine işlev ana.js dosya ve ardından Vue uygulamanızın bu yönlendirici işlevini kullanmak yöntem.

Ardından, aşağıdakine benzer bir kod bloğu yapılandırarak rotalarınızı Vue uygulamanıza uygulayabilirsiniz: