VueJS - Yönlendirme
VueJS'de yerleşik bir yönlendirici özelliği yoktur. Yüklemek için bazı ek adımlar izlememiz gerekiyor.
CDN'den Doğrudan İndirme
Vue-yönlendiricinin en son sürümü şu adreste mevcuttur: https://unpkg.com/vue-router/dist/vue-router.js
Unpkg.com, npm tabanlı cdn bağlantıları sağlar. Yukarıdaki bağlantı her zaman en son sürüme güncellenir. İndirip barındırabiliriz ve aşağıdaki gibi vue.js ile birlikte bir komut dosyası etiketi ile kullanabiliriz -
<script src = "/path/to/vue.js"></script>
<script src = "/path/to/vue-router.js"></script>NPM'yi kullanma
Vue yönlendiriciyi kurmak için aşağıdaki komutu çalıştırın.
npm install vue-routerGitHub'ı kullanma
Depoyu GitHub'dan aşağıdaki gibi klonlayabiliriz -
git clone https://github.com/vuejs/vue-router.git node_modules/vue-router
cd node_modules/vue-router
npm install
npm run buildVue-router.js kullanarak basit bir örnekle başlayalım.
Example
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
<script type = "text/javascript" src = "js/vue-router.js"></script>
</head>
<body>
<div id = "app">
<h1>Routing Example</h1>
<p>
<router-link to = "/route1">Router Link 1</router-link>
<router-link to = "/route2">Router Link 2</router-link>
</p>
<!-- route outlet -->
<!-- component matched by the route will render here -->
<router-view></router-view>
</div>
<script type = "text/javascript">
const Route1 = { template: '<div style = "border-radius:20px;background-color:cyan;width:200px;height:50px;margin:10px;font-size:25px;padding:10px;">This is router 1</div>' }
const Route2 = { template: '<div style = "border-radius:20px;background-color:green;width:200px;height:50px;margin:10px;font-size:25px;padding:10px;">This is router 2</div>' }
const routes = [
{ path: '/route1', component: Route1 },
{ path: '/route2', component: Route2 }
];
const router = new VueRouter({
routes // short for `routes: routes`
});
var vm = new Vue({
el: '#app',
router
});
</script>
</body>
</html>Output
Yönlendirme ile başlamak için vue-router.js dosyasını eklememiz gerekir. Kodu buradan alhttps://unpkg.com/vue-router/dist/vue-router.js ve vue-router.js dosyasına kaydedin.
Komut dosyası, vue.js'den sonra şu şekilde eklenir -
<script type = "text/javascript" src = "js/vue.js"></script>
<script type = "text/javascript" src = "js/vue-router.js"></script>Gövde bölümünde aşağıdaki gibi tanımlanan bir yönlendirici bağlantısı vardır -
<p>
<router-link to = "/route1">Router Link 1</router-link>
<router-link to = "/route2">Router Link 2</router-link>
</p><router-link>kullanıcıya görüntülenecek HTML içeriğine gitmek için kullanılan bir bileşendir. To özelliği, hedef, yani görüntülenecek içeriklerin seçileceği kaynak dosyadır.
Yukarıdaki kod parçasında iki yönlendirici bağlantısı oluşturduk.
Yönlendiricinin başlatıldığı komut dosyası bölümüne bir göz atın. Aşağıdaki gibi oluşturulan iki sabit vardır -
const Route1 = { template: '<div style = "border-radius:20px;background-color:cyan;width:200px;height:50px;margin:10px;font-size:25px;padding:10px;">This is router 1</div>' };
const Route2 = { template: '<div style = "border-radius:20px;background-color:green;width:200px;height:50px;margin:10px;font-size:25px;padding:10px;">This is router 2</div>' }Yönlendirici bağlantısı tıklandığında gösterilmesi gereken şablonları vardır.
Ardından, URL'de görüntülenecek yolu tanımlayan yollar sabitidir.
const routes = [
{ path: '/route1', component: Route1 },
{ path: '/route2', component: Route2 }
];Rotalar, yolu ve bileşeni tanımlar. Yol ie/route1 kullanıcı yönlendirici bağlantısına tıkladığında URL'de görüntülenecektir.
Bileşen, görüntülenecek şablon adlarını alır. Yolların yolu, mülke yönlendirici bağlantısıyla eşleşmelidir.
Örneğin, <yönlendirici bağlantısı to = ”path here”> </router-link>
Ardından, örnek aşağıdaki kod parçası kullanılarak VueRouter'da oluşturulur.
const router = new VueRouter({
routes // short for `routes: routes`
});VueRouter yapıcısı yolları parametre olarak alır. Yönlendirici nesnesi, aşağıdaki kod parçası kullanılarak ana vue örneğine atanır.
var vm = new Vue({
el: '#app',
router
});Örneği yürütün ve tarayıcıdaki ekranı görün. Yönlendirici bağlantısını incelerken ve kontrol ederken, aşağıdaki ekran görüntüsünde gösterildiği gibi aktif öğeye sınıf eklediğini göreceğiz.
Eklenen sınıf class = “router-link-exact-active router-link-active”. Aktif bağlantı, sınıfı yukarıdaki ekran görüntüsünde gösterildiği gibi alır. Dikkat edilmesi gereken bir diğer nokta da <yönlendirici bağlantısı> etiket olarak işleniyor.
Yönlendirici Bağlantısı için aksesuarlar
<router-link> 'e iletilecek daha fazla özellik görelim.
-e
Bu, <yönlendirici bağlantı> 'ya verilen hedef yoldur. Tıklandığında, to değeri dahili olarak router.push () öğesine iletilecektir. Değerin bir dize veya konum nesnesi olması gerekir. Bir nesneyi kullanırken, onu örneğin 2'de gösterildiği gibi bağlamamız gerekir.
e.g. 1: <router-link to = "/route1">Router Link 1</router-link>
renders as
<a href = ”#/route”>Router Link </a>
e.g. 2: <router-link v-bind:to = "{path:'/route1'}">Router Link 1</router-link>
e.g. 3: <router-link v-bind:to =
"{path:'/route1', query: { name: 'Tery' }}">Router Link 1</router-link>//router link with query string.Örnek 3'ün çıktısı aşağıdadır.
URL yolunda name = Tery, sorgu dizesinin bir parçasıdır. Örneğin: http: //localhost/vueexamples/vue_router.html#/route1? Name = Tery
yerine koymak
Yönlendirici bağlantısına değiştirme eklemek, router.replace() onun yerine router.push(). Değiştir ile, navigasyon geçmişi saklanmaz.
Example
<router-link v-bind:to = "{path:'/route1', query: { name: 'Tery' }}" replace>Router Link 1</router-link>eklemek
<Yönlendirici bağlantısı> <yönlendirici bağlantısı> öğesine ekleme eklemek, yolu göreli hale getirecektir.
Yol / yol1 ile yönlendirici bağlantısından yönlendirici bağlantı yolu / yol2'ye gitmek istersek, tarayıcıda yolu / route1 / route2 olarak gösterecektir.
Example
<router-link v-bind:to = "{ path: '/route1'}" append>Router Link 1</router-link>etiket
Şu anda <router-link> bir etiket olarak işler. Bunu başka bir etiket olarak işlemek istersek, tag = ”tagname” kullanarak aynısını belirtmemiz gerekir;
Example
<p>
<router-link v-bind:to = "{ path: '/route1'}" tag = "span">Router Link 1</router-link>
<router-link v-bind:to = "{ path: '/route2'}" tag = "span">Router Link 2</router-link>
</p>Etiketi span olarak belirledik ve bu tarayıcıda görüntülenen şeydir.
Şimdi görüntülenen etiket bir span etiketidir. Navigasyon için yönlendirici bağlantısına tıkladığımızda yine de tıklamayı göreceğiz.
aktif sınıf
Varsayılan olarak, yönlendirici bağlantısı etkin olduğunda eklenen etkin sınıf yönlendirici bağlantısı etkindir. Aşağıdaki kodda gösterilenin aynısını ayarlayarak sınıfın üzerine yazabiliriz.
<style>
._active{
background-color : red;
}
</style>
<p>
<router-link v-bind:to = "{ path: '/route1'}" active-class = "_active">Router Link 1</router-link>
<router-link v-bind:to = "{ path: '/route2'}" tag = "span">Router Link 2</router-link>
</p>Kullanılan sınıf, active_class = ”_active” dir. Bu, tarayıcıda görüntülenen çıktıdır.
tam aktif sınıf
Uygulanan varsayılan tam etkin sınıf, yönlendirici-bağlantı-tam-etkin'dir. Tam aktif sınıf kullanarak bunun üzerine yazabiliriz.
Example
<p>
<router-link v-bind:to = "{ path: '/route1'}" exact-active-class = "_active">Router Link 1</router-link>
<router-link v-bind:to = "{ path: '/route2'}" tag = "span">Router Link 2</router-link>
</p>Tarayıcıda görüntülenen budur.
Etkinlik
Şu anda, yönlendirici bağlantısı için varsayılan olay tıklama olayıdır. Event özelliğini kullanarak aynısını değiştirebiliriz.
Example
<router-link v-bind:to = "{ path: '/route1'}" event = "mouseover">Router Link 1</router-link>Şimdi, yönlendirici bağlantısının üzerine fareyle geldiğimizde, aşağıdaki tarayıcıda gösterildiği gibi gezinecektir. Yönlendirici bağlantısının üzerine fareyle gelin ve gezinmenin değiştiğini göreceğiz.
