Vue.js Yönlendirici

Vue.js, UI'ler (Kullanıcı Arayüzleri) ve SPA'lar (Tek Sayfa Uygulamaları) oluşturmak için kullanılan reaktif bir javascript çerçevesidir ve geliştiriciler, Vue'da uygulamalar geliştirirken kodlamayı ve özgürlük ve rahatlık hissetmeyi severler.js. Yönlendirme amacıyla, Vue.js yerleşik yönlendirme özelliğini sağlamaz. Ancak bu özelliği sağlamak için Vue Router adında resmi bir üçüncü taraf kütüphanesi var. Bu özelliği kullanarak web sayfaları arasında gezinebiliriz, ancak yeniden yükleme yapmadan. Bu yazıda, Vue Router'ı Vue'da nasıl kurabileceğimizi ve kullanabileceğimizi göreceğiz.js.

Kurulum

Vue yönlendiricisini mevcut bir Vue'ya kurabiliriz.terminalde aşağıdaki komutu çalıştırarak js projesi

npm vue yönlendiriciyi kurun

Başarılı bir kurulumdan sonra VueRouter'ı ana dosyaya içe aktarmamız gerekiyor.js dosyasını src dizininde de aşağıdaki sözdizimini kullanarak

Vue'yu 'vue'dan içe aktar
yönlendiriciyi içe aktar './yönlendirici'
Vue.kullan(yönlendirici)

Yönlendiriciyi içe aktardıktan sonra, projenizde gidip vue-router'ı kullanabilirsiniz.

Ancak Vue yüklüyorsanız.js Vue CLI kullanarak. Bu ekstra kurulum adımına ihtiyacınız olmayacak. Bir ön ayar seçerken bir vue-router eklentisi ekleyebilirsiniz.

kullanım

vue-router'ın kullanımı çok basit ve kullanımı kolaydır. İlk olarak, şablonda veya HTML'de

Bu oldukça basit ve net vue-router örneğinde. Yönlendirici bağlantı bileşenlerini kullanarak basit gezinme oluşturduk ve bağlantıyı 'to' adlı pervaneyi kullanarak sağladık. Yönlendirici bağlantısı, çapa 'a' etiketiyle aynı şekilde çalışır. Aslında varsayılan olarak bir 'a' etiketi olarak işlenir. Yönlendirici görünümünde, rotayla eşleşen göreli bileşene sahip olacağız.

Javascript'te, rotalarını tanımlamak için önce bileşenleri kaydetmeli ve içe aktarmalıyız. Comp adında bir bileşenimiz olduğunu varsayalım.vue, yönlendiricinin dizininde içe aktaracağımız görünüm dizininde.js dosyasını yönlendirici dizinine yerleştirin ve onu bir rota olarak tanımlayın.

Bir bileşeni içe aktarmak için aşağıdaki ifadeyi kullanırız

Comp'u "… /views/Comp'tan içe aktar.vu";

İçe aktardıktan sonra, rotayı şimdi tanımlamalı ve bileşene eşlemeliyiz. Böyle,

const yollar = [

yol: "/",
isim: "Komplo",
bileşen: Komp

];

Virgülle ayırarak birden fazla rota da verebiliriz. Böyle,

const yollar = [

yol: "/",
isim: "Komplo",
bileşen: Komp
,

yol: "/ comp2",
isim: "Comp2",
bileşen: Comp2

];

Rotaları belirledikten sonra. Router dizisini yönlendirici örneklerine iletin. Öyleyse, yönlendirici örneğini de oluşturalım

const yönlendirici = createRouter(
route // 'routes: route' kısaltması
);

Sonunda, esas olarak.js dosyası. Kök örneği oluşturmalı ve onu da bağlamalı ve tüm uygulamanın rotalardan haberdar olması için içindeki yolları enjekte etmeliyiz.

createApp(Uygulama)
.kullan(yönlendirici)
.mount("#app");

Bu enjeksiyon tekniğini kullanarak. Yönlendiriciye herhangi bir bileşenden erişebiliriz bu.$yönlendirici.

Artık yönlendirici bağlantı bileşenini kullanmak yerine, bir düğmeyi veya istediğiniz herhangi bir şeyi tıklatarak rotaları programlı olarak itebiliriz. Örneğin,

yöntemler:
clickFunc()
bu.$yönlendirici.itme('/hakkında')

Bitirme ve özet

Bu yazıda, Vue Router'ı farklı yollar kullanarak kurmayı öğrendik ve Vue router'ı javascript ve Vue'da programlı olarak kullanmayı öğrendik.js'nin şablonu. Ayrıca, çok kolay ve adım adım ayrıntılı bir kılavuzda mevcut bir projede Vue Router'ı kurmayı da öğrendik. Vue Router hakkında daha fazla bilgi edinmek istiyorsanız, lütfen Vue Router'ı ziyaret edin: Resmi Belgeler.