Karakteristike i specifičnosti ruta

Svojstva “route” objekta

Vue rute

Objekat “route” sadrži sve informacije u vezi trenutne rute, kojim se uvek može pristupiti iz aplikacije preko nekog od njegovih svojstava:

$route.path – String koji je jednak putanji trenutne rute, uvek se rešava kao apsolutna putanja (npr. “/user/profile”).
$route.params – Objekt u vidu parova ključ/vrednost koji se koristi za vraćanje podataka iz dinamičkih ruta. Ako nema parametara, vrednost će biti prazan objekat.
$route.query – Objekt u vidu parova ključ/vrednost koji se koristi za vraćanje podataka query string-a.
$route.fullPath – full URL uključujući query i hash.
$route.matched – Niz koj sadrži zapise o putanji trenutne rute
$route.name – Ime trenutne rute ako mu je definisano
$route.redirectedFrom – Ime rute sa koje izvršena redirekcija ako postiji redirekcija

Query string

Query string je deo URL adrese koji je dodat na kraj standardne adrese nakon znaka pitanja (?) i sadrži podatke koji su obično u obliku parova key/value.

http://example.com/?bar1=a&bar2=b

1	http://example.com/?bar1=a&bar2=b

Preuzimanje podataka iz query string-a

Koristeći svojstvo rute “$route.query” možemo dobiti šta je poslato kroz query string u okviru URL adrese. Znak pitanja ne ulazi u sastav query string-a. Objekat $route.query sadrži key/value parove.

Primer

Za url adresu: /foo?user=1:

$route.query.user == 1

1	$route.query.user == 1

Ubacivanje podataka u query string

Jedan od načina za ubacivanje query parametara u rutu je kroz atribut “to”<router-link> taga:

<router-link tag="li" to="/user/?status=awesome">User B</router-link>

1	<router-link tag="li" to="/user/?status=awesome">User B</router-link>

Može da se koristi i objektna sintaksa:

<router-link :to="{name:'user', query:{status:'awesome'}}" >User</router-link>

1	<router-link :to="{name:'user', query:{status:'awesome'}}" >User</router-link>

Imenovane rute (named routes)

Vue ruter nudi mogućnost kreiranja tzv. imenovanih ruta, koje nam olakšavaju pozivanje tih ruta, jer se umesto putanje može koristiti dodeljeno ime. Imenovanje rute se vrši definisanjem svojstva “name”.

routes.js

export const routes = [
    {path: '/', component: Home, name: 'home'},
    {path: '/user', component: User, name: 'user'},
];

export const routes = [

{path: '/', component: Home, name: 'home'},

{path: '/user', component: User, name: 'user'},

];

Nakon definisanja svojstva “name”, ruti možemo da pristupimo veoma lako koristeći samo svjosto “name” bez korišćenja svojstva “path”:

<router-link :to="{name:'home'}" exact>Home</router-link>

1	<router-link :to="{name:'home'}" exact>Home</router-link>

ili

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

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

Dinamičke rute

U slučaju da imamo potrebu za velikim brojem stranica ali sa istom strukturom, gde se menjaju samo podaci na predvidjenim mestima (klasičan primer za to je “user stranica”, koja koristi isti template za sve user-e, ali sa različitim sadržajem), bilo bi glupo da za svaku stranicu pravimo novu rutu.
Iz tog razloga se kreiraju tzv. “dinamičke rute” koje će koristiti istu komponenti, ali sa različitim sadržajem koji zavisi od vrednosti koja se prosledi kao dinamički deo url adrese.

www.example/user/dinamickideo

1	www.example/user/dinamickideo

Definisanje dinamičke rute

U okviru Vue.js dinamički deo rute se definiše tako što se doda promenjiva kojoj prethodi dvotačka:

routes.js

export const routes = [
    {
        path: '/user/:id',
        name: 'user',
        component: User
    }
];

export const routes = [

{

path: '/user/:id',

name: 'user',

component: User

}

];

Prikupljanje podataka iz dinamičke rute

Da bismo u okviru Vue.js iskoristili dinamički parametar iz rute, potrebno je da koristimo this.$route.params.dinamičikaPromenjiva (npr. this.$route.params.id).

Primer

U ovome primeru promenjiva “id” čuva vrednost dinamičkog dela rute.

<script>
    export default {
      data() {
        return {
          userId: this.$route.params.id
        }
      }
    }
</script>

export default {

data() {

return {

userId: this.$route.params.id

}

</script>

Primer prikupljanja podataka iz dinamičke rute

pattern	matched path	$route.params
/user/:id	/user/pera	{ id: 'pera' }

Primer prikupljanja podataka kod slučaja dve nestovane dinamičke rute:

pattern	matched path	$route.params
/user/:id/post/:post_id	/user/pera/post/123	{ id: 'pera', post_id: 123 }

watch “$route” objekat

U trenutku kada se već nalazimo na nekoj dinamičkoj ruti i želimo da menjanjem samo dinamičkkog dela url adrese učitamo novu stranicu (npr. idemo sa jednog user profila na drugi), javlja se problem jer Vue.js neće da učita novi sadržaj. Drugim rečima promena samo dinamičkog dela url-a neće naterati Vue.js da ponovo učita istu komponentu sa izmenjenim podacima.
Da bi smo rešili problem, moramo da pratimo (watch) $route objekat i na taj način obezbedimo da aplikacija reaguje i na promenu dinamičkog dela url adrese. Nakon promene “watcher” bi pozivao odgovarujuću callback funkciju.

Primer

U ovome primeru se prati promena $route objekta, i nakon promene poziva callback funkcija koja ažurira svojstvo “id” data objekta.

data() {
    return {
      userId: this.$route.params.id
    }
}
methods:{
    updateCallback () {
       this.userId = this.$route.params.id
    }
}
watch: {
   '$route': 'updateCallback'
}

data() {

return {

userId: this.$route.params.id

}

methods:{

updateCallback () {

this.userId = this.$route.params.id

}

watch: {

'$route': 'updateCallback'

}

Dinamičke rute & <router-link>

Za izlistavanje dinamičkih linkova je potrebno da prosledimo dinamičku rutu kroz atribut “params”.

Primer

Za dinamiču rutu:

{
    path: '/user/:id',
    name: 'user',
    component: User
}

{

path: '/user/:id',

name: 'user',

component: User

}

se koristi sledeći kod za izlistavanje gde je neophodno da pored atributa “name” prosledimo dinamičku rutu kroz atribut “params” (promenjiva u dinamičkoj ruti je predstavljena sa :id):

<ul>
    <li v-for="izlistanId in userId" v-bind:key="id">
        <router-link :to="{ name: 'user', params: { id: izlistanId }"> User {{ izlistanId }} </router-link>
    </li>
</ul>

<ul>

<router-link :to="{ name: 'user', params: { id: izlistanId }"> User {{ izlistanId }} </router-link>

</li>

</ul>

Ugneždene rute

U slučaju kada stanica ima pod-stranice, onda želimo da kada korisnik dodje na glavnu stranu da im budu ponudjena nova navigacija (tzv. “pod-meni”) koji im omogućava da posete pod-stranice (npr.za glavnu stranu “user” podemeni sa stranicama “user-profil” i “user-edit)”. Pored toga želimo i da se URL adresa promeni u tom maniru. Da bismo to postigli, možemo koristiti ugnježene rute (eng. nested routes) )unutar komponente koja čini glavnu stranu.
Ugnježdene rute se dobijaju dodavanjem novog svojstva u ruti za glavnu stranicu pod nazivom “children”. Ovo svojvo je niz objekata koje sadrže pod-rute:

{path: '/user', component: User, children: [
        {path: '/', component: UserStartPage},
        {path: 'profil', component: Profil},
        {path: 'edit-profil', component: EditProfil}
    ]
}

{path: '/user', component: User, children: [

{path: '/', component: UserStartPage},

{path: 'profil', component: Profil},

{path: 'edit-profil', component: EditProfil}

]

}

Zatim je potrebno u okviru template glavne stranice (u ovome primeru “user”) da se ubacuje željna navigacija sa komponentom <router-view></router-view> :

Sada možemo da definišemo navigaciju ka ovim pod rutama:

<ul class="list-group">
    <router-link tag="li" to="/user/pera">User Pera</router-link>
    <router-link tag="li" to="/user/mika">User Mika</router-link>
</ul>

<router-link tag="li" to="/user/pera">User Pera</router-link>

<router-link tag="li" to="/user/mika">User Mika</router-link>

</ul>

Primer

Redirekcija rute

Globalna redirekcija

Preusmeravanje (redirekcija) podrazumeva da aplikacija preusmeri korisnika koji želi da poseti stranicu sa jednom rutom ( /a ), na neku drugu stranicu (npr. “b”). Nakon prosledjivanja na drugu stranicu aplikacija će promeniti i URL adresu u odgovarajuću (/b).

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: '/b' }
  ]
})

const router = new VueRouter({

routes: [

{ path: '/a', redirect: '/b' }

]

})

Sintaks kod imenovane (“named”) rute izgleda ovako:

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: { name: 'foo' }}
  ]
})

const router = new VueRouter({

routes: [

{ path: '/a', redirect: { name: 'foo' }}

]

})

Programirana redirekcija

Pod programiranom redirekcijom se podrazumeva slučaj kada želimo otvorimo odredjenu stranicu ali pod odredjenim uslovima (primer: otvaranje nove stranice nakon submita forme)

Primer $router.push()

U ovome primeru programerski definišemo promenu rute nakon klika na dugme sa metodom $router.push()

<template>
   <button @click="goHome">Početna strana</button>
</template>
<script>
    export default {
      methods: {
        goHome(){
          this.$router.push({name : "Home"})
        }
      }
    }
</script>

<button @click="goHome">Početna strana</button>

</template>

export default {

methods: {

goHome(){

this.$router.push({name : "Home"})

}

</script>

Primer $router.go()

U ovome primeru programerski definišemo promenu rute nakon klika na dugme sa metodom $router.go()

<template>
   <button @click="goBack">Nazad</button>
</template>
<script>
    export default {
      methods: {
        goBack(){
          this.$router.go(-1)
        }
      }
    }
</script>

<button @click="goBack">Nazad</button>

</template>

export default {

methods: {

goBack(){

this.$router.go(-1)

}

</script>

NAPOMENA:
Treba naglasiti da $router objekt ima i metode: $router.back() i$router.forward() za koje nije čak potrebno ni proslediti argument.

Podelite:

Web Programiranje

Skripte

Karakteristike i specifičnosti ruta

Svojstva “route” objekta

Query string

Preuzimanje podataka iz query string-a

Primer

Ubacivanje podataka u query string

Imenovane rute (named routes)

routes.js

Dinamičke rute

Definisanje dinamičke rute

routes.js

Prikupljanje podataka iz dinamičke rute

Primer

watch “$route” objekat

Primer

Dinamičke rute & <router-link>

Primer

Ugneždene rute

Primer

Redirekcija rute

Globalna redirekcija

Programirana redirekcija

Primer $router.push()

Primer $router.go()

Ostavite komentar