Uvod u rutiranje aplikacija

route 66

U razvoju web aplikacija, rutiranje je vezano za razdvajanje korisničkog interfejsa. Deljenje aplikacije na više različitih stranica je neophodno radi lakšeg sagledavanja kompleksne aplikacije. U najgrubljim crtama rutiranje predstavlja definisanje pravila uz pomoć kojih se povezuje odgovarajući sadržaj sa zahtevom koji podnet posebnom URL adresom. Routiranje se često deli na dve glavne sekcije:

  • a) Routiranje na serveru (eng. server-side routing) podrazumeva da klijent podnosi zahtev serveru definisan sa URL adresom a server obavlja rutiranje (povezuje zahtev sa odgovarajućim sadržajem) i vraća zahtevani sadržaj.
  • b) Rutiranje na strani klijenta (eng. client-side routing) podrazumeva da klijent podnosi zahtev serveru samo pri inicijalnom učitavanju stranice, dok sve naknadne promene URL adrese prihvata javascript.

Tradicionalne “Single Page Aplication” (SPA) su web aplikacije koje se učitavaju samo jednom, a zatim se dinamično ažuriraju nakon interakcije sa korisnikom (bez narednih zahteva ka serveru). Kod njih se na početku dobija prazan HTML i JavaScript koji nakon toga sve dinamički generiše uključujući i stranice.
Nakon učitavanja prve stranice (obično index.html), Vue.js simulira promenu stranica, jer menja url adrese u prozoru brovsera, dok zapravo istovremeno samo re-renderuje početnu stranicu (index.html). Na taj način dočarava korisniku efekat da posećuje različite stranice, ali u stvarnosti, uvek je u pitanju ista stranica sa drugačijim sadržajem. Iz tog razloga se kaže da Vue.js izvršava “rutiranje na strani klijenta”.
Sa ovim je opisan tzv. ClientSide Rendering (CSR) tradicionalnih SPA aplikacija, ali treba znati da postoji i mogućnost ServerSide Rendering-a (SSR), kada server svaku stranu renderuje “on the fly” i vraća statičnu HTML stranu, nakon čega Vue.js preuzima kontrolu nad stranicom i udahnjuju je joj život. Pojavljivanje “pune” HTML stranice je najveća prednost serverskog renderovanja, jer pretraživači (google, bing…) mogu lako da pregledaju sadržaj, što nije slučaj kod renderovanja na klijentu gde dolazi prazan HTML a tek kasnije JavaScript renderuje DOM. Iz tog razlog se sa SSR-om se dobija bolji SEO. U Vue.js svetu za jednostavno server side renderovanje se koristi framework pod nazivom NUXT.js.

Instalacija ruter plugina

Oficijalni ruter ne dolazi uz osnovnu instalaciju Vue.js, već se mora naknadno ubaciti.

vue-cli & router

  1. Može da se ubaci kao skripta distribuirana preko CDN mreže, stoga je dovoljno je da se na dnu body sekcije posle skripte za sam Vue.js ubaci i skripta sa uvek najnovijim izdanjem rutera:
    <script src="                            https://unpkg.com/vue-router/dist/vue-router.js"></script>
  2. Kada se koristi “vue-cli” za brzo kreiranje starter projekta, onda se ruter plugin može instalirati zajedno sa instalacijom Vue.js, ukoliko se izabere opcija koja uključuje i ruter (pogledaj sliku).
  3. Za već postojeći Vue.js projekat ga možemo naknadno samostalno instalirati koristeći neki od package manager-a:


Kreiranje router instance i injektovanje u aplikaciju

a) Obaveštavanje aplikacije da postoji ruter plugin

Prva stvar koju mmoramo da uradimo je da importujemo ruter plugin u glavni javascript fajl gde nam se nalazi glavna vue instaca, a zatim da obavestiom aplikaciju da treba da je koristi ( Vue.use(VueRouter);).

main.js

b) Kreiranje instance rutera

Pri kreiranju instance rutera konstruktorskoj funkciji se prosledjuje tzv. options objekat koji sadrži podatke o rutama (za koju url adresu je vezana koja komponenta).

a) Definisanje ruta (za otpions objekat)

Glavno svojstvo ovog “options objekta” je “routes”. Svojstvo “routes” je niz koji sadrži podatke o rutama, i predstavljen je kao niz objekata, gde svaki objekat definiše jednu rutu. Jednu rutu definišu dva osnovna svojstva: “path” i “component”. U svojstvu path se definiše url adresa, a u svojstvu component naziv komponente koja čuva sadržaj za tu rutu

optionObjekat

Svojstvo “routes” predstavlja sve rute i zbog bolje organizacije je preporuka da se izdvoji na jednu lokaciju (npr. fajl routes.js.). A da bi rute bile dostupne u celoj aplikaciji potrebno je iz tog fajla eksportovati jednu promenjivu koja će predstavljati sve naše rute.

routes.js

NAPOMENA:
Spisak svih svojstava rute možete pogledati u dokumentaciji u sekciji “route-object-properties”

b) Kreiranje instance

Za kreiranje instance je potrebno konstruktorskoj funkciji proslediti objekat koji ima definisano svojstvo “routes”. Svojstvo “rutes” (tzv. ““niz svih ruta”) je obično kreiran u zasebnom fajlu, pa ga moramo prvo importovati u fajl gde kreiramo instancu (obično main.js).

main.js

c) Injektovanje rutera u aplikaciju

Prosledjivanjem ruter instance kao svojstvo u glavnu Vue instancu smo izvršili injektovanje rutera. Injektovanje rutera podrazumeva da su karakteristike ruter objekta od tog trenutka dostupne u svakoj komponenti sa this.$router, a trenutna ruta sa this.$route.

main.js

Sa injektovanjem rutera smo definitivno završili povezivanje rutera i aplikacje, pa bi krajnji main.js mogao ovako da izgleda:

main.js

NAPOMENA:
Spisak svih metoda Ruouter instance možete pogledati u dokumentaciji u sekciji “router-instance-methods”

Definisanje mesta gde se prikazuje sadržaj

Poznato je da Vue.js simulira promenu stranica, tako što pri promeni url adrese samo re-renderuje početnu stranicu (index.html) ali sa novim sadržajem. Stoga se mora definisati mesto gde će se prikazati sadržaj koji zavisi od url adrese, a to se postiže sa
<router-view></router-view>

App.vue

Dodavanje linkova

I način: deklarativno ubacivanje linkova sa <router-link>

Za deklarativno linkovanje ruta koristimo za to predvidjenu komponentu <router-link>. Ova komponenta se renderuje kao <a> element u pretraživaču.

NAPOMENA:
Komponenra <router-link> nema koa link tipično podešeno svojstvo kursora na hover elementa cursor: pointer;, te je potrebno to definisati u CSS-u.

atribut “to”

Pošto se ova komponenta renderuje kao link tj. <a> element, potrebno je dodeli ti mu adresu na kojuće da vodi, u slučaju <router-link&gt komponente se ne koristiti poznati href atribut već novi specijalizovan pod intuitivnim nazivom “to”:

Stilizovanje aktivnog linka

Stilizovanje aktivnog <router-link> taga je veoma jednostavno i predstavlja veliku prednost u odnosu na običan <a></a> tag. Sve što je potrebno je da na svaki tag <router-link>, primenimo atribut “active-class”, nakon čega Vue.js vodi računa i kada je veza aktivna. Ako je link aktivan, Vue.js će linku dodati odgovarajuću CSS klasu, a naše je samo da ubacimo kod u tu klasu i tako stilizujemo aktivan link.
Elementu mogu da se dodaju dve klase:

  • “router-link-active” – Ova klasa je uvek prisutna, čak i kada su njegovi podlinkovi aktivni. To znači da će “user” link (/user) biti aktivan čak ako je aktivna i njegova podstranica (/user/234)
  • “router-link-exact-active” – Ova klasa je prisutna samo ako je baš taj link aktivan.
Atribut “exact”

Attribut exact se koristi da bismo bili sigurni da se aktivna klasa primenjuje samo na početnu stranicu tj. samo kada je početna stranica aktivna. U suprotnom, link za početnu stranu će biti aktivan čak i kada kliknete na neku drugu stranicu.

NAPOMENA:
Spisak svih <router-link> atributa možete pogledati u dokumentaciji u sekciji “router-link-props”

Obično se svi linkovi ka stranicama grupišu na jednom mestu na stranici, pa je zgodno da se takodje i kod koji je vezan za navigaciju grupiše u jedan fajl/komponentu (npr.Navigation.vue).

Navigation.vue

II način: programirano ubacivanje linkova sa router.push()

Programski način podrazumeva korišćenje metode ruter objekat pod nazivom push ().

Sintaksa

Glavni parametar koji je obavezan ukazuje na putanju gde treba da odvede link, dok će opcione callback funkcije (onComplete() ili onAbort()) biti pozvane kada je navigacija uspešno završena ili prekinuta.

Ovaj metod ubacuje novu stavku u istoriju, tako da kada korisnik klikne na back dugme, biva prebačen na prethodni URL.

Primer – PageTwo.js

Ovaj metod omogućava nam da potisnemo put na stack postojećih ruta. Ovo osigurava da dugmad za nazad i napred pretraživača nastavi da funkcioniše u redu. Takođe, obratite pažnju da smo jednostavno prošli niz predstavljanje rute kojom želimo da se krećemo. Takođe možete proći objekat kao {put: ‘/’} ako želite.

Primer objašnjenog postupka

Podelite:

Ostavite komentar