12 Kas 2019

Vue temelleri — 2

Author: strongsoul | Filed under: Teknik

Selam okuyucu, vue temellerini anlatmak üzere kaleme aldığım yazımın 2.sinde yeniden beraberiz, trt açılışı gibi oldu, cli üzerinde geri kalan süreçleri toparlayıp bu makalede bitirmek üzere kolları sıvayacağız.
Kısa adı ile cli uzun adı ile command line interface i öncelikle kurmamız lazım
bunun için;
npm install -g @vue/cli komutu ile kurulumu sağlamalıyız
ardından “vue create “projeadiniz”” ile yada hazır olan bir folder üzerinde “vue create .” diyerek projenizi üretebilirsiniz.
kurulumu bitirdikten sonra npm run serve diyerek vue yu ayağa kaldırabiliriz
projenin folder yapısına baktığımızda

main.js
App.vue
components
— –>HelloWorld.vue

dosyalarını görmekteyiz
main.js içerisine baktığımızda vue instance ının üretildiğini ve App.vue root template’imizi mount ettiğini görmekteyiz.App.vue içinden diğer templatelere components yapısı üzerinden etkileşim sağlayarak ilerlediğini görebiliriz, bizde böyle ilerleyeceğiz.

HelloWorld.vue ye baktığımızda 3 temel blok gözümüze çarpar
1 — <template> -> vue tagları ile harman html bileşenlerini ürettiğimiz yer
2 — <script> -> vue script kısmımız
3 — <style> -> albenili siteler için vazgeçilmezimiz 🙂

şimdilik HelloWorld.vue bir kenarda kalsın biz components e sağ tuş yaparak FirstComponent.vue adı
altında bir dosya üretelim
içerisine ise şu şekilde dolduralım;

<template>
<div id=”test1″>
test
</div>
</template>
<script>
export default {
name:”FirstComponent”
}
</script>
<style scoped>
#test1{
color: red;
}
</style>

daha sonra App.veu dosyasına gelip şu şekle çevirelim;
<template>
<div id=”app”>
<FirstComponent />
</div>
</template>

<script>
import FirstComponent from ‘./components/FirstComponent.vue’

export default {
name: ‘app’,
components: {
FirstComponent
}
}
</script>

bu sayede HelloWorld componenti yerine FirstComponent i sayfa içerisinde çağırmış olduk
components kısmında yazım şeklini “alias”:”component tanimi” şeklinde yapmaz isek yani
fc:FirstComponent gibi bir tanım yapmazda
FirstComponent adı ile doğrudan component adı ile yazarsak bu değer aynı zamanda
<template> tagları arasında çağırılacak tanım adı olmuş olur, adı ile mütevellit çalışır.

peki burada root componentten veri geçirmemiz gerekirse ?
bu durumun birden fazla yolu var,

örneğin props ile bu işlemi sağlayabiliriz.
veriyi alacağımız componentimizde mesela FirstComponent dosyasında tanımlama yaptığımız,
export kısmında name alanından hemen sonra props tanımlaması ile içeri gelecek

veri bloklarını tanımlayabiliriz;

export default {
name:”FirstComponent”,
props:{
inp1: String
}
}

daha sonra App.vue içerisinden
<FirstComponent inp1=”traleybus” /> veriyi geçirebiliriz
FirstComponent içerisinde inp1 data ile tanımlanmış bir veri kümesi gibi içerden erişilebilir olacaktır
ve {{inp1}} dememiz yeterli olacaktır
şimdi componentimizi biraz daha zengin bir hale getirelim;

<template>
<div id=”test1″>
{{inp1}}
<br/>
{{isOpen===true?’acik’:’kapali’}}
<br />
<input type=”button” value=”ac/kapa” @click=”openClose()”>
</div>
</template>
<script>
export default {
name:”FirstComponent”,
data(){
return{
isOpen:true
}
},
methods:{
openClose(){
this.isOpen=!this.isOpen
}
},
props:{
inp1: String
}
}
</script>
<style scoped>
#test1{
color: red;
}
</style>

burada dikkatinizi çekerse vue temellerine dair daha önce yazdığım
yazı daki içerikten çok da farklı değil data biraz farklı bir yazım almış durumda ama onun
dışında her şey aynı,
ek bir not olarak props larda validation tanımı yapabiliyoruz bunu ilk tanımlama sırasında betimleyebiliyoruz
örnek olarak :

name :{
type: String,
required: true
}

sadece string değer olan ve mutlaka doldurulması gereken bir props üretmiş olduk.

style üzerinde tanımlı scoped dikkatinizi çekmiştir bu değer ile style bulunduğu component ile sınırlı kalmış oluyor.

peki child dan parenta gönderimleri nasıl yapıyoruz?
bunun ilk yolu this.$emit methodudur vue instance ı üzerinden yayım yapma yolu
yani child üzerinden this.#emit(“gonderilecek datanin etiketi”,”data”)
root üzerinden ise componentimizin üzerinde event handlerımız ile childdan yaydığımız etiketini betimleyerek yani
@childemitetiketi=tetikleyecegimiz olgu ornek yazim;
this.emit(“domates”,”kırmızı sulu leziz”)
@domates=ye()
peki içerden gönderdiğimiz değeri ne ile alıyoruz onunda tek yolu $event kodu şu şekle çevirdigimiz de veriyi iceri almis oluruz
@domates=ye($event)

childlar arasında haberleşmenin ilk durumunu root üzerinde prop ile haberleşmeyi sağlayarak ilerletebiliriz

child1 <> root <> child2 <> root <> child3

childlar arasında haberlşmenin bir diğer yolu ise event bus yoludur
örnek olarak bir child component daha üretip App.vue ye bağladığımızı düşünelim
yani

App(root)
child1 — childofchild1 child2 — childofchild2
-> emitdata -> catchdata

rootun alt componentinin alt componenti olan childofchild1 den bir emit yapıp istediğimiz herhangi bir componentten alımını sağlayalım — ki bizim senaryomuzda bu child2nin alt componenti olacak.

öncelikle projemizin içerisine EventBus.js adı altında ve aşağıdaki satırlara sahip eventbusımızı üretiyoruz

import Vue from ‘vue’
const EventBus = new Vue()
export default EventBus

ürettiğimiz bu içerik aslında bir vue instance ından başka bir şey değil fakat emit edip yakalama sürecinde gönderim ve alımda dinleyecilere sahip bu yüzden bu instance ı kullanıyoruz
vue instanceının ortak nesnesi nin .on eventını dinleyici olarak set ettiğimiz her yerde yayılan veri bloklarını yakalayabilmemizi sağlamasıdır
nitekim yapıya devam edecek olursak EventBus.js i import ettiğimiz gönderici ve alıcı vue filelarımızda

import EventBus from ‘./EventBus.js’

gönderim de

EventBus.$emit(“patates”,”kimse sevemez seni benim sevdiğim kadar”) ile veriyi yayıp

alımda ise aşağıdaki şekilde dinleyici tanımını yaparak ilerleyebiliriz

created(){
EventBus.$on(“patates”,(receivedata)=>{
this.myPatates=receivedata
})
}

alım sürecindeki satırları açıklayacak olursak aslında vue lifecycleındaki created adı ile mütevellit vue componentinin yüklenmesi sırasında
çalıştırılan bir methoddur burada .$on ile emit edilen değerleri dinleyecek bir tanımlama yapılandırmış oluyoruz

vue üzeride veri akışlarını sağlayan özelliklerinden biri de slottur komple bir html bloğunu componente gönderebiliriz
component içerisinde 2 çeşit kullanımı vardır
<slot> diye tanımlandığında isim verilmemiş tüm içeriği gösterir “name” tanımlaması yapıldığında ise sadece bu isimle anılan slot tanımlamlarını gösterir
örnek ;
component içerisinde template de örneğin bir div tagı içerisinde aşağıdaki gibi bir tanımlamaya;

<div>
<slot />
<slot name=”specific1″/>
</div>

componentin çağırıldığı kısımda şu şekilde veri gönderebiliriz

<ChildOfComp4>
<div>
<strong>Comp4 den gelen değerler — genel slot </strong>
</div>
<div slot=”specific1″>
ben specific 1 için gelen değerim
</div>

Şu ana kadar componentlerin içerikteki veri akışlarına baktık fakat componentlerden o an sadece istediğimizi yüklemeyi nasıl yapacağız?

bunun için vue bize <component> elementini sunmaktadır
açtığımız 3 tane component olduğunu düşünelim adları comp1 comp2 ve comp3
bu element üzerinde ki :is propertisine hangi component in adını verirsek o component yüklenecektir
<component :is=”selectedComponent”></component>
component nesnesi her daim component i yeniden üretir ve yenilenmiş olur
bunu component lerden bir tanesine bir counter verisi ve onu tetikleyen bir button yardımı ile test edebiliriz

peki nasıl canlı tutacağız ve componentin canlı kalmasını nasıl sağlayacağız ?
bunu da vue bize <keep-alive> ile sağlıyor componenti bu yapı içerisine aldığımızda artık her daim canlı kalacaktır

işlemlerde modifiye edilmiş bazı fonksiyonları sürece dahil edebiliyoruz örneğin; v-model.lazy ile enter sonrası işlem yapmasını ele aldırabiliyoruz, bunlara modifier diyoruz.

başka bir modifier olan @click.prevent gönderim öncesi uğrak noktası gibi düşünebiliriz, bu arkadaşımız da event modifier dır

bazı html bileşenlerine bakacak olursak;
checkboxlar için v-model tanımı yaparken array datası ile bind etmemiz yeterli, radiobuttonlarda ise veri tek olduğundan tüm radigroupdaki elemanlara char gibi bir değişken bağlamamız yeterlidir.

directivelere bakacak olursak v- sonrası gelen tanımlama directive adını ifade ediyor örnek v-bind,v-for,v-text,v-html etc..
vue nun bize verdiği directive ler haricinde biz de kendi directive imizi üretebiliyoruz
bunun için

main.js içerisinde directive imizi tanımlamamız lazım

Vue.directive(“color”,{
bind(el, binding, vnode){
el.style.backgroundColor=’red’
}
})

buradaki ilk parametre directive imizin adı ikincisi ise işlemidir bind gibi directive in aldığı bazı methodlar vardır;

//directive hook methodları
bind(el, binding, vnode) 
el elementi, binding hangi argumanı aldı, vnode virtual dom üzerinde ki node
inserted(el, binding, vnode) -> 
element doma eklenir eklenmez çalışan hook
update(el, binding, vnode, oldvnode) -> 
component update olduğunda
componentUpdated(el, binding, vnode, oldvnode) -> 
child component ler de update olduğunda çalışır üsttekinden farklı olarak
unbind(el, binding, vnode) -> 
directive unbind olduğunda

tanımlamamıza dikkat edersek directive verdiğimiz elementin style ı üzerinden arkaplanını kırmızıya çeviriyoruz
peki parametrik bir yapı ile bunu değiştirseydik
directive i tanımladığımız kısımda el.style.backgroundColor=binding.value ile gönderdiğimiz parametreyi set etmemiz gerekti
tabii directive i kullandığımız yerde de v-color=”’green’” şeklinde bir kullanım ile değeri göndermeliyiz

bitti mi ? bitmedi 🙂 custom directivelerimize argumanda gönderebilme imkanına sahibiz örneğin background argumanı nı gönderdiğimiz de background renklensin
vermezsek text renklensin için
directive tanımımızı şu hale getirebiliriz
if(binding.arg===’background’)
{
el.style.backgroundColor=binding.value
}
else{
el.style.color=binding.value
}

directive i kullandığımız yerde ise <p v-colorwithparam:background=”’green’”> şeklinde bir değişimimiz olmalı

dikkat edecek olursak binding.arg ile argümanı yakalayıp background ifadesi geçmiş ise arka planı geçmemiş ise texti değiştiriyoruz

bunun yanında custom directive imize modifier da ekleyebiliyoruz
modifier array bir yapıdadır birden fazla modifier tanımlayabiliriz örneğin
<p v-colorwithparam:background.delay=”’green’”>
burada verdiğimiz delay modifierını aşağıda göreceğiniz şekilde binding.modifiers[] ile alabiliyoruz
Vue.directive(“colorwithparam”,{
bind(el, binding, vnode){
if(binding.arg===’background’)
{
if(binding.modifiers[‘delay’]){
setTimeout(() => {
el.style.backgroundColor=binding.value
}, 2000);
}
else{
el.style.backgroundColor=binding.value
}
}
else{
if(binding.modifiers[‘delay’]){
setTimeout(() => {
el.style.color=binding.value
}, 2000);
}
else{
el.style.color=binding.value
}
}

}
})

directive tanımını main.js de global olarak yapmak yerine local olarak istediğimiz component içerisinde kendisine özgü tanımlayabiliriz
tek yapmamız gereken
methods vb.. gibi
directives:{
ile yukarıdaki içerikteki gibi işlem yapmaktır.

directive içerisine text yerine örneğin json gibi complex veri tipi de gönderebiliriz
o da şu şekilde;
directives:{
“multicolor”:{
bind(el, binding, vnode){
el.style.backgroundColor=binding.value.back;
el.style.color=binding.value.front;
}
}

tanımlanır
kullanımı ise
<p v-multicolor=”{front:’white’, back:’blue’}”> şeklindedir

filter bizim data propertimizde yer alan bir veriyi değiştirmemizi sağlar yani transform eder.

örneğin bir veri yumağını göstermeden önce işleyeceğiz ve tüm karakterlerin büyük olmasını sağlayacağız;

methods yada directives gibi tanımlama standartımız filter için ise filters dır,
filters:{
touppercase(value){
return value.toUpperCase()
}
},

aslında filter tanımı belli bir işlem için fonksiyonileteyi gerçekleştiren bir methoddan başka bir şey değildir
fakat kullanımda pipe ile doğrudan veri bloğunu değişime uğratabilmesi açısından oldukça güzel bir içeriğe sahiptir
tanımladığımız filteri işleme almak için pipe yeterlidir
örneğin; messageText adı altında bir değişkenimiz olsun ve yukarıdaki filterı uygulayıp öyle verinin gözükmesini istiyoruz
yapacağımız tek şey şudur;
{{ messageText | touppercase }}
filter tanımlamalarındaki tüm işlemleri istediğimiz sıra ile pipe koyarak işleme sokabiliriz
yani az önce yaptığımız touppercase filter işleminden sonra bir de noktalivirgül parsı koyabiliriz
{{ messageText | touppercase | semicolonsplit }}
bu tanımlamaları global olarakta yapabiliriz gene main.js file ımızda
addcount adı altında global bir filter tanımlamak istersek aşağıdaki şekilde tanımlamamız yeterli olacaktır

Vue.filter(“addcount”,(value)=>{
return value+’ ‘+value.length
})

kullanımda ise fark yoktur tüm componentler üzerinde
{{ variable | addcount}} diyerek işleme tabi tutabiliriz

filter bu tarz işlemler için önerilirken örneğin bir filtreleme algoritması üzerinde bir dizi filtreleme gibi işlemlerde önerilen bir durum değil
zira her an tekrar tekrar işlem sürecini çalıştıran bir yapısı var
peki bir filtreleme işlemini nasıl yapacağız ? bunu computed ve genel içerik süreci ile işlememiz gerekiyor
adım adım yapalım
uygulamamıza SearchFilter adı altında bir vue dosyası ekleyip componentlerimize ekleyip çağırımı mızı yapalım
SearchFilter içerisinde
template imiz içerisinde search eden bir input v-model ile bağlanmış
bir de datada list olarak tanımlamış olduğumuz bir liste gösterimi sağlayalım
yani;
<template>
<div>
<input type=”text” v-model=”searchText” />
<ul>
<li v-for=”data in dataList”>
{{data}}
</li>
</ul>
</div>
</template>
<script>
export default {
“name”:”SearchFilter”,
data:()=>{
return{
searchText:’’,
dataList:[‘bozkır kurdu’, ‘sidartha’, ‘denemeioz’]
}
}
}
</script>

şimdi filter yerine computed üzerinde filtrelemeyi sağlayacak methodumuzu yapılandıralım

computed:{
filterMethod(){
return this.dataList.filter(rtrn=>{
return rtrn.match(this.searchText)
})
}
}

computed tanımı sonrası template için deki dataListi verdiğimiz kısmı filterMethod olarak değiştirdiğimiz de
anlık filtreleme işlemini computed ile yapılandırlmış oluruz

geldik mixinlere : component bazlı computeted filters prop data gibi propertyleri duplicate olmasını engelleyebileceğimiz bir mekanizma
tanımladığımız propertyleri durmadan tanımlamak zorunda bırakmıyor

örneğin ; yukarıdaki anlattığımız computed-filter yapısını mixen ile yapmak ister isek
bir js file ı açıp adına MyMixins.js diyelim
export const MyMixins={
data:()=>{
return{
searchText:’’,
dataList:[‘bozkır kurdu’, ‘sidartha’, ‘gülün adı’]
}
},
computed:{
filterMethod(){
return this.dataList.filter(rtrn=>{
return rtrn.match(this.searchText)
})
}
}
}
dikkat edersek standart tanımlamalarımızı sadece taşıdık şimdi bunları heryerde kullanabiliriz ama nasıl ?
az önce ürettiğimiz computed filter kısmı yerine sadece mixin tanımı yapmamız yeterli olacaktır
yani scriptimizi aşağıdaki satırlara çevirmemiz
<script>
import {MyMixins} from ‘../components/MyMixins’
export default {
“name”:”CompMixinSample”,
mixins : [MyMixins]
}
</script>

birden fazla mixin kullanımı için sadece mixinse ekleme yapmak yeterli

global mixin ;
Vue.mixin({
created(){
console.log(‘global mixin created’)
}
})


sıra geldi olmazsa olmazımız olan servis callarına
bunun için vueresource’u kullanacağız
ilk olarak npm install vue-resource — save diyerek uygulamamıza vueresource u ekleyelim
main.js içerisinde vueresource u vue instance ımıza dahil edelim
şu şekilde ;

import VueResource from ‘vue-resource’
Vue.use(VueResource)

daha sonra TestResource.vue adında bir component eklemesi yapalım ve daha önce yaptığımız gibi
bir template üretip içerisinde bir button ile clickleyip geri işlem sonucunu dönen bir yapı kuracağız şöyle ki;
<template>
<div>
<input type=”button” 
@click=”saveMyData()” value=”save” />
{{response}}
</div>
</template>
<script>

export default {
“name”:”HttpOrResourceUsing”,
data(){
return{
response:’’
}
},
methods:{
saveMyData(){
this.response = ‘tgest’

this.$http.post(“https://x.firebaseio.com/users.json“, { username : ‘x’ })
.then((response)=>{
this.response = response
})

}
}
}
</script>

ben burada firebase üzerinde bir yapılandırma sağladım ama farklı servis calları yapılandırabilinir
this.$http.post(“https://x.firebaseio.com/users.json“, { username : ‘x’ })
.then((response)=>{
this.response = response
})

dikkat edersek .post birinci parametre olarak request urlini ikinci parametre olarak ise gönderilecek veriyi almaktadır burada kullanmadım
ama bir parametre olarak ta header ı alır

vueresource üzerinde gelen giden üzerinde kesme yapıp araya girmek için interceptor kullanımına sahibiz
bunu instance a dahil ettiğimiz yerde yani main.js üzerinde tanımlamayı yaptıktan hemen sonra
Vue.http.interceptors.push((request, next)=>{}) tanımı ile sağlayabiliyoruz
burada mesela gelen requesti handle edebilir yada
next ile response üzerinde tüm süreçlere müdahil olabiliriz
yani ;
Vue.http.interceptors.push((request, next)=>{
console.log(‘interceptor’, request.method)
if(request.body.username===’test’)
{
request.body.username=’yenibirpostuser’
}

next((response)=>{
console.log(‘response’, response);
response.userList=()=>{
return {“userList”: response.body}
}
});
})

vue js de şimdiki bakacağımız konu ise router konusu
vue-router ı kurmamız lazım bunun için npm install vue-router — save diyerek paketleri uygulamamıza dahil edebiliyoruz
aynı vue-resource da olduğu gibi main.js dosyamızda
importumuzu yapıp import VueRouter from ‘vue-router’
Vue.use(VueRouter) diyerek projemize vue-router ı gömmüş oluyoruz
projemize router paketlerini dahil ettiğimize göre şimdi kullanıma geçebiliriz
projemizde 2 tane componenti route a bind edelim

const router = new VueRouter({
routes : [{ path : ‘/hello’, component : HelloWorld },
{ path : ‘/comp4’, component : Comp4 }]
})

routes array veri kümesi alır dizinin her bir elemanı için bağlayacağı pathi ve bu pathin hangi componenti call edeceği bilgisini içermelidir
tabii bu componentler main.js de import edilmiş olması gereklidir
son olarak ise router tanımımızı main js de ki render bağlantısını yaptığımız kısma router bunları kullanacak diye belirtmemiz gerekiyor
new Vue({
router,
render: h => h(App),
}).$mount(‘#app’)

artık tarayıcımıza gelip url/hello yazdığımızda HelloWorld componentine yönlenecektir
fakat nerede gözükeceğini belirtmedik 🙂
App.vue içerisinde yani root componentimizde
<router-view></router-view> taglarını koyduğumuz yer de HelloWorld içeriği yansıtılacaktır

route da gelen hashtag kaldırımı için ->
domain/#/user
ana domain — routing mode — route
routing mode un bir kaç çeşidi mevcut bunlardan biri hashtag dir ve default olarak gelmektedir, biz hashtag yerine standart usulü projemize yansıtmak istersek routing tanımı yaptığımız main.js içerisine mode : ‘history’ eklemesini geçmemiz gerekmektedir

const router = new VueRouter({
routes : [{ path : ‘/hello’, component : HelloWorld },
{ path : ‘/comp4’, component : Comp4 }],
mode : ‘history’
})

peki bu tanımlı routerlar üzerinde gezinmek için link tanımlamalarını nasıl yapacağız ?
tabii ki “router-link” ile to ve tag özelliklerini tanımlayarak yönlenmesi gereken ifadeyi betimlemiş olacağız, tıpkı aşağıdaki gibi;
<router-link to=”/hello” tag=”div”>
<span>hello</span>
</router-link>
<router-link to=”/comp4″ tag=”div”>
<span>comp4</span>
</router-link>

router linklerinde benzeşen tanımlamalar var ise router-link te birebir eşleşmeyi almak için exactı kullanırız
<router-link exact active-class=’red’ to=”/hello” tag=”div”>
<span>hello</span>
</router-link>

peki bir button yardımı ile router değişimi nasıl sağlarız
standart button method tanımımızı yaptıktan sonra
buttonun methodun da aşağıda belirttiğim 3 şekilde bu işlemi sağlayabiliriz
this.$router.push(‘/comp4’) ->doğrudan path
this.$router.push({‘path’:’/comp4′}) -> object bir yapıda path’e tanımı yapmak
this.$router.push({name:’route1′}) -> router da name betimlediğimiz kıstasları bu şekilde vererek çağırmak

route üzerinden değer almak ?
route tanımı üzerinde path tanımlamasını /: ile birlikte yapıyoruz ki dinamik olduğunu routes a anlatmış olalım;
{ path : ‘/dyna/:id’, component : DynamicRoute, name:’dr’ }
DynamicRoute componenti üzerinden değeri almak için
this.$route.params ı kullanıyoruz yani this.$route.params.id ile gönderdiğimiz /degeri yakalıyoruz
fakat aynı route a farklı gönderimlerde gönderdiğimiz parametrelerin data içerisinde ki atama yaptığımız değişkene yansımadığını görürüz bunu aşabilmek için
route u watch ile izleyip değişiminde bizim değerimizi de değiştirmesini sağlayabiliriz şöyle ki ;
watch:{
“$route”(to, from){
this.id=to.params.id
}
}

nested route ile master componentin içerisinde farklı içerikte detay componentlerin yüklenmesini tetikelyebiliriz
mesela url imiz /master olsun /master/:id ile rootu tanımlayıp sonra buna dayalı çocuk rootları tanımlarsak pathin istediğimiz kırılımlarına dair içeriği alt componentler ile bağlayabiliriz
tek yapmamız gerekeren routes tanımımız da children tanımlamamızı yapmak
{ path : ‘/master/:id’, component : Master, children: [
{path: ‘d1’, component : Detail},
{path: ‘d2’, component : Detail2}
] }],

ve master üzerinde router-view elementimizi eklemek
<div class=”user”>
Master Component
<router-view></router-view>
</div>

bu kadar artık /master/234 gibi bir çağırımda master componenti master/234/d1 çağırımında ise detail componenti gelecektir

dinamik router link yazımı ;
<router-link tag=”button” :to=”/user’ + $route.params.id + ‘/edit’”>kullanıcıyı düzenle</router-link>
yada name ile router tanımını yapıp örneğin userEdit deyip aşağıdaki şekilde işlem yapmak
<router-link tag=”button” :to=”{name:’userEdit’, params:{ id : $route.params.id }}”>kullanıcıyı düzenle</router-link>

peki routerlarda query parametre gönderip alma nasıl oluyor;
tanımladığımız router linke query ek propertisi ile istediğimiz veriyi setleyebiliyoruz örneğin ;
<router-link active-class=’red’ :to=”{name:’dr’,params:{id:333},query:{name:’test’}}” tag=”button”>
<span>dynamic different call with name</span>
</router-link>

peki nasıl okuyoruz daha önceki durumlardan tahmin edeceğimiz gibi $route.query bize gelen veri akışını sunuyor mesela burada name i alabilmek için
$route.query.name dememiz yeterli olacaktır.

bu arada biz route-view e isim verip istediğimiz route un istediğimiz route view de görünmesini sağlayabiliriz;
bunu sağlama yolumuz şu şekildedir;
öncelikle main.js deki route tanımlamamızı yapıyoruz
{ path : ‘/comp3’, name:’comproute3′, components:{
myname: Comp3
} }

comp3 adı atlında import ettiğimiz componentimizi /comp3 route una ismini ise comproute3 eşitledik
dikkat edersek burada component ile tanımlama yapmak yerine components yapılandırmasını kullandık
myname tanımlamasını ise aslında nerede gösteriyoruz ?
<p> — — — — router view with name — — — -</p>
<router-view name=’myname’></router-view>
<p> — — — — router view with name end — — — -</p>

bu şekilde sayfamız içindeki birden fazla router view ile yönlendirme sonuçlarını farklı router viewlerde gösterebiliriz

redirect;
redirect tanımı bildiğimiz path işlemi yapmaktan farklı değildir, route path tanımı yaptığımız kısımda bir küme daha açıp path ve redirect ile tanımlamalarımızı yaparız
şu şekilde ;
{ path: ‘/redirect1’, redirect:’/hello’},
{ path: ‘/redirect2’, redirect:{name:’route2′}}

dikkat edeceğimiz gibi redirect tanımı string yada obje alımı süreci bir önceki yapılandırmalarımızdan farklı değil
burada eğer işlemde olmayan geri kalan tüm istekleri tekil bir yere yönlendirmek ister isek tek yapmamız gereken
* tanımıdır, şu şekilde;
{ path: ‘*’, redirect:’/hello’}

route giriş öncesi kontroller;
route çağırıldığında 3 çeşit kontrol ile route işlemi yapılmadan önce araya girebilme imkanımız var,
1 — main.js içerisinde route tanımlamalarızın olduğu kısımda beforeEach methodu ile
routers.beforeEach((to,from,next)=>{
window.console.log(‘her router oncesi’)
next();
})
2 — route tanımlaması sırasında beforeEnter methodu ile
const routers = new vuerouter({
routes : [{ path : ‘/r1’, component : router1, name:’router1′,beforeEnter:(to,from,next)=>{
window.console.log(‘route call oncesi’)
next();
}}],
mode:’history’
})
3 — component içerisinde beforeRouteEnter methodu ile
beforeRouteEnter(to, from, next){
window.console.log(‘component seviyesinde control — beforeroute’)
next(false);
}

route çıkış sonrası kontrol;
route değişimlerinde bu işlemi yakalayabilmemizi sağlayan methodumuz beforeRouteLeave dir örneğin verilerini kayıt etmemiş bir userı aşağıdaki gibi uyarabiliriz
beforeRouteLeave(to, from, next){
window.console.log(‘route dan ayrilmadan once’)
if(confirm(‘kayit etmediniz çıkacak mısınız?’))
{
next()
}else{
next(false)
}
}

yine hızlı bir makale oldu 🙂 gelecek makalede görüşmek üzere.

Yorum Bırakın