Vue Router Kılavuzu

Giriş

Vue.js ile web uygulamaları geliştirirken, bir Tek Sayfalı Uygulama (SPA), kullanıcıların bu sayfalar arasında gezinmesine izin vermek için birden çok sayfayı bir açılış sayfasına bağlamak isteyeceksiniz. Bu olarak bilinir yönlendirme.

Yönlendirme, bir kullanıcının bir web sitesindeki farklı sayfalara yönlendirildiği süreçtir. Vue.js, Tek Sayfa Uygulamaları oluşturmak için kullanılan bir JavaScript çerçevesidir; bu, bu uygulamanın sunucudan tarayıcıya yalnızca bir kez yüklendiği ve yönlendirme sırasında tarayıcının yeniden yüklenmesi gerekmediği anlamına gelir; bunun yerine, yalnızca bu sayfaları ister ve bunlar yüklenir.

Bu kılavuzda, Vue.js ile yönlendirme yapmayı öğreneceğiz ve yapılabilecek çeşitli yönlendirme türlerini ve nasıl yapılabileceğini derinlemesine inceleyeceğiz.

Başlamak

Vue.js'de yönlendirme şu şekilde yapılır: Vue Yönlendirici, bir yönlendirme sistemi kurmamıza izin vermek için çekirdek Vue kitaplığı ile birlikte çalışır. kullanmak isteriz vue-router projemizde iki senaryoda. Router'ı ya mevcut bir projede kullanmak istiyoruz ya da yeni bir proje oluştururken eklemek istiyoruz.

Mevcut Projede Vue Router Kurulumu

Bütünleştirme vue-router Mevcut bir projeye geçiş teknik olabilir ve şimdi bu detayların üzerinden geçeceğiz. İlk adım, aşağıdaki komutu kullanarak vue yönlendirici paketini kurmak olacaktır:

! npm install vue-router@4

Kurulduktan sonra, şuraya gidin: src klasör ve adlı bir klasör oluşturun router, ardından adlı bir dosya index.js içinde router yönlendirici yapılandırma dosyamız olarak hizmet edecek klasör. Bizim src dizin şimdi şöyle görünecek:

içinde index.js dosyasında, yönlendirici yapılandırma kodu olan aşağıdaki kodu yapıştırdığımızdan emin olalım:

import { createRouter, createWebHashHistory } from 'vue-router'
import HomePage from '../views/HomePage.vue' const routes = [ { path: '/', name: 'home', component: HomePage },
] const router = createRouter({ history: createWebHashHistory(), routes
})
export default router

Bir var routes Her nesnenin tek bir yolu temsil ettiği birden çok nesne olabilen tek bir nesne içeren dizi. Şu an için yalnızca ana sayfa bileşenine yönlendirilecek olanı oluşturduk.

Bunların her biri routes nesneler tipik olarak şunlardan oluşur: path, sitenin köküne göre url yolu, nametanımlayıcı görevi gören ve component, sayfanın üst kısmında içe aktardık.

Route dizisinin yanı sıra, bir yönlendirici oluşturarak altta yönlendirici örneğini kurduk. createRouter() işlev ve geçiş history anahtar değerler ve routes dizi ve sonra dışa aktarıyoruz router uygulamamız içinde kullanım için örnek.

Bu yönlendirici yapılandırmasını uygulamamız içinde kullanmak için, main.js içindeki dosyayı src Klasör, import router from "./router"ve sonra ekleyin .use(router) arasında createApp(App) ve .mount('#app') aynen aşağıda olduğu gibi:

import router from './router' createApp(App).use(router).mount('#app')

Bu vue-router uygulamamız içinde global olarak yapılandırılmıştır ve bir sonraki adım, onu uygulamamız içinde kullanmaktır. Bu, dahil edilerek kolayca gerçekleştirilir. <router-view /> içinde App.js yalnızca eşleşen rotayı oluşturan şablon etiketi:

<!--App.vue -->
<template>
<!-- Any code placed here is going to be fixed -->
<!-- This will only show the page that matches the selected route --> <router-view /> <!-- Any code placed here is going to be fixed -->
</template> <script> export default { name: 'App', }
</script>

Vue.js'de Rotaları Ayarlama

Rotalar genellikle router/index.js dosyanın yolları dizisidir ve bu yollar bileşenlere bağlanır. Tüm sayfa görünümlerinin depolanacağı bir görünümler klasörü oluşturmak iyi bir uygulamadır. Örneğin:

Bu noktada artık rotaları manuel olarak nasıl kuracağımızı biliyoruz.

Vue CLI ile Vue Router'ı Kurun

Yeni bir proje oluşturmak üzereysek ve bundan faydalanacağımıza inanıyorsak vue-router, projeyi oluştururken bunu yapmak daha kolaydır.

Tek yapmamız gereken, en son sürümünü yüklemek için Vue CLI'yi kullanmak. vue-router projemizi oluşturma sürecinde özellikleri manuel olarak seçerken:

Vue.js projesi oluşturma hakkında daha fazlasını okuyun ve öğrenin. Vue CLI Kılavuzu!

Vue Router ile Tembel Yükleme Rotaları

Uygulamamızın boyutu büyüdükçe paket boyutu da büyür ve bu da sitemizin yüklenmesinin daha uzun sürmesine neden olur. Kullanabiliriz vue-router Kullanıcı özellikle talep edene kadar bazı belirli rotaları yüklemekten kaçınmak için tembel yükleme uygulamak.

Bu, genellikle yönlendirici yapılandırma dosyasında, import en üstteki ifade ve rotamızın bileşen seçeneğinde dinamik bir içe aktarma ifadesi ile değiştirilmesi:

import { createRouter, createWebHashHistory } from 'vue-router';
const routes = [ { path: '/', name: 'home', component: () => import(/* webpackChunkName: "home" */ '../views/HomePage.vue'), }, { path: '/about', name: 'about', component: () => import(/* webpackChunkName: "about" */ '../views/AboutPage.vue'), },
];
const router = createRouter({ history: createWebHashHistory(), routes,
});
export default router;

İle Rotalar Arasında Gezinme

Şimdiye kadar rotalar oluşturabildik, ancak uygulamamız içinde nasıl gezineceğiz? kullanıyoruz <router-link> etiketi yerine <a> yönlendirmeyi işlemek için HTML öğesi.

Örneğin, uygulamamızın üst kısmında bir gezinti çubuğu oluşturmak istiyorsak, bunu şurada yapabiliriz. App.js yukarıdaki dosya <router-view/> tüm rotalarda gösterilecek şekilde etiketleyin:

<nav> <router-link to="/">Home</router-link> | <router-link to="/about">About</router-link>
</nav>

Yönlendirici bağlantısı aşağıdakileri kabul eder: to='path' rota yapılandırılırken ayarlandığı gibi kullanıcıyı bileşenin yoluna götüren öznitelik. Bu gibi çalışır href='path``' HTML'deki nitelik.

Adlandırılmış Rotaları Kullanma

Adlandırılmış rotaları kullanmak, name erişimi olan anahtar name verileri bu şekilde bağlayarak yolu kullanmak yerine yolları yapılandırırken belirlediğimiz özellik:

<router-link :to="{ name: 'About' }">About</router-link>

Bu yöntemi kullanmanın bir avantajı, büyük uygulamalarımız için rota yolunu değiştirmeye karar vermemiz durumunda, külfetli olabilecek tüm bağlantı yollarını değiştirmeye başlamamıza gerek olmamasıdır.

Dinamik Yönlendirme

Gereksiz sayfa tekrarından kaçınmak için dinamik yönlendirme kullanımını gerektiren durumlar ortaya çıkabilir. Örneğin, bir meyve listemiz olduğunu ve bir kullanıcının belirli bir meyveye tıklayabilmesini istediğimizi ve meyve ayrıntıları sayfasında yalnızca o meyveyle ilgili ayrıntıların görüntülendiğini varsayalım. Bu durumda dinamik yönlendirme kullanıyoruz.

İki sayfamız olurdu - biri meyveleri bir listede sergilemek için diğeri ise meyvenin ayrıntılarıyla doldurulacak bir "plan" sayfası olan her meyvenin ayrıntılarını göstermek için. Sayfaları Vue klasöründe oluşturacağız ve ardından yolları routes dizi:

import FruitsPage from '../views/FruitsPage.vue';
import FruitDetails from '../views/FruitDetails.vue'; const routes = [ { path: '/fruits', name: 'Fruits', component: FruitsPage, }, { path: '/fruits/:id', name: 'FruitDetails', component: FruitDetails, },
];

için fark edeceğiz FruitDetails sayfaya dinamik ekledik id mülk böylece alır id parametresini kullanır ve o sayfada gösterilen belirli verileri sorgulamak için kullanır. $route.params şablonumuzda, böylece rotayı dinamik hale getirir.

içinde FruitsPage, uygulamamıza döngü yaptığımız bir dizi meyvemiz olduğunu varsayalım, her meyveyi paramların yanında bir bağlantıyla şu şekilde sarabiliriz:

<!-- FruitsPage.vue --> <template> <h1>Fruits page</h1> <div :key="fruit.id" v-for="fruit in fruits"> // dynamic linking by attaching the id as params <router-link :to="{ name: 'FruitDetails', params: { id: fruit.id } }"> <h3>{{ fruit.name }}</h3> </router-link> </div>
</template> <script> export default { data() { return { fruits: [ { id: 1, name: 'Apple', description: "Apples are an incredibly nutritious fruit.", }, { id: 2, name: 'Mango', description: 'A mango is an edible stone fruit produced by the tropical.', }, { id: 3, name: 'Banana', description: 'A banana is an elongated, edible fruit of the genus Musa.', }, ], }; }, };
</script>

Bu noktada bir kullanıcı her bir meyveyi tıkladığında onları FruitDetails sayfaya erişebileceğimiz id parametresinde hangi meyvenin ayrıntılarının gösterilmesi gerektiğini belirlemek için kullanın. FruitDetails gidin.

Rota Parametrelerine Erişin

Şimdiye kadar dinamik olarak belirli bir sayfaya paramları nasıl aktaracağımızı gördük, şimdi bu paramlara nasıl erişebileceğimizi görelim. FruitDetails sayfa. Vue'da parametrelere erişmemizin iki yolu vardır - aracılığıyla $route.params veya aksesuarlardan yararlanarak:

kullanma $route.params

Parametrelere doğrudan şuradan erişilebilir: $route.params:

<template> <h1>Fruit Details</h1> <p>This is fruit with the id of {{ $route.params.id }}</p>
</template>

Ya da bizim içinde erişebiliriz data() yöntemi kullanarak this:

<template> <h1>Fruit Details</h1> <p>This is fruit with the id of {{ id }}</p>
</template> <script> export default { data() { return { id: this.$route.params.id, }; }, };
</script>

Vue Props'u Kullanma

Verilere rotalar aracılığıyla dinamik olarak erişmenin bir başka kolay yöntemi de props kullanmaktır. önce ayarlamamız lazım props için true rota yapılandırma nesnesinde:

{ path: '/fruits/:id', name: 'FruitDetails', component: FruitDetails, props: true,
},

Bu şekilde, bundan sonra yapmamız gereken tek şey eklemek props seçeneği script etiketleyin ve ardından içindeki aksesuarlardan yararlanın. template etiket:

<template> <h1>Fruit Details</h1> <p>This is fruit with the id of {{ id }}</p>
</template> <script> export default { props: ['id'], };
</script>

404 Hataları – Rota Bulunamadı

Bir kullanıcının var olmayan bir rotaya gitmesi durumunda, Vue sayfayı herhangi bir bileşen olmadan yükleyerek boş bir sayfa oluşturur. Bu durumda yapılacak en iyi şey, belki de onları ana sayfaya veya gitmek istediklerine inandığımız herhangi bir yere yönlendiren bir düğmeyle birlikte bir 404 sayfası görüntülemektir.

Bu, 404 sayfamız için bir bileşen oluşturarak ve ardından yönlendirici yapılandırma dosyamızın route dizisine bir 404 route ekleyerek kolayca halledilebilir, ancak bu sefer daha önce bildirilmemiş tüm yolları yakalamak için normal bir ifade kullanacağız:

{ path: '/:catchAll(.*)', name: 'ErrorPage', component: ErrorPage,
}

The :catchAll düzenli bir ifadesini alan dinamik segmenttir. (.*) Vue Router, kullanıcının gittiği rotanın yönlendiricimizin yapılandırma dosyasında tanımlanıp tanımlanmadığını kontrol etmek için kullanır. Bu tür rotalar yoksa, kullanıcı, bizim durumumuzda olan bileşene yönlendirilir. ErrorPage bileşen:

<template> <h2>404 Page</h2> <p>This is a 404 page</p> <p>Visit home page <router-link to="/">here</router-link></p>
</template>

Yönlendirmeler

Kullanıcıların belirli bir rotayı ziyaret ettiklerinde yeniden yönlendirilmesini istediğimiz bir durumda, örneğin artık kullanmadığımız eski bir rotamız varsa, kullanıcıların o rotayı ziyaret ettiklerinde yeni rotaya yönlendirilmesini isteriz. Bu, rota yapılandırma dizimize yeni bir nesne ekleyerek kolayca gerçekleştirilir. redirect alan:

{ path: '/fruits', name: 'Fruits', component: FruitsPage,
},
{ path: '/all-frults', redirect: '/fruits',
},

Yukarıdaki kodun tek yaptığı, bir kullanıcı ziyaret ederse, yolun /all-fruits, onları şuraya yönlendirirdi: /fruits rota.

Programlı Gezinme

Şimdiye kadar yönlendirme hakkında çok şey öğrendik, ancak bilmek isteyeceğiniz bir şey daha var: programlı navigasyonun nasıl gerçekleştirileceği. Programlı navigasyonu, bir oturum açma veya kayıt işlemi gibi bir rota üzerinde gerçekleşen belirli bir eyleme dayalı olarak veya “geri dön” düğmesi gibi belirli bir düğmeyi tıklatarak kullanıcının yeniden yönlendirildiği/yönlendirildiği bir durum olarak tanımlıyoruz.

Yönlendirici Geçmişi

Tercihlerimize bağlı olarak geriye veya ileriye doğru kolayca gezinmek için tarayıcı geçmişini kullanabiliriz. Hatırlarsanız, bir createRouter() ayarladığımız yönlendirici yapılandırma dosyasındaki işlev history değer, Vue yönlendiricinin, web uygulaması üzerinden yönlendirme yaparken yönlendirici geçmişimizi takip etmesine izin verir.

Bu, bir düğme tıklaması gibi bir koşula dayalı olarak tarayıcının geçmişini geçmemizi sağlar:

<template> <h1>Fruit Details</h1> <p>This is fruit with the id of {{ id }}</p> <button @click="goBack">Go Back</button>
</template> <script> export default { props: ['id'], methods:{ goBack(){ this.$router.go(-1) } } };
</script>

kullanarak ilerlemeye de karar verebiliriz. 1 yerine -1 ve her ikisini de kullanabileceğimiz 2 adım ilerlemek istediğimizi varsayalım 2 or -2.

Itmek

push() genellikle bir eylem gerçekleştikten sonra kullanılır ve geçmiş yığınına yeni bir giriş ekler. Örneğin, bir kullanıcı başarıyla oturum açarsa, gösterge tablosu sayfasına programlı olarak gitmek isteriz. Bu, rota adının yanına Push yöntemi eklenerek gerçekleştirilir:

this.$router.push({ name: 'Dashboard' });

Sonuç

Yönlendirme, Vue'nun temel işlevlerinden biridir. Bir inşa etmedikçe Tek Sayfalı Uygulama (SPA), kullanıcıların bu sayfalar arasında gezinmesine izin vermek için birden çok sayfayı bir açılış sayfasına bağlamak isteyeceksiniz.

Bu kılavuzda, yönlendirmenin ne olduğuna, yönlendirmeyi nasıl kurabileceğinize bir göz attık. vue-router yeni ve mevcut projelerde tembel yükleme nasıl yapılır, rotalar arasında nasıl gezinilir, dinamik rota nasıl yapılır, rota parametrelerine nasıl erişilir ve programlı navigasyon nasıl yapılır.

• Akıllı para. Avrupa'nın En İyi Bitcoin ve Kripto Borsası.
• Plato blok zinciri. Web3 Metaverse Zekası. Bilgi Güçlendirildi. SERBEST ERİŞİM.
• KriptoHawk. Altcoin Radarı. Ücretsiz deneme.
• Kaynak: https://stackabuse.com/guide-to-vue-router/