Vue Router, kao zvanični ruter za Vue, omogućava kreiranje jednostraničnih aplikacija (SPA) unutar Vue okvira. On vam pruža mogućnost da povezujete komponente vaše web aplikacije sa različitim putanjama pregledača, upravljate istorijom navigacije vaše aplikacije i prilagođavate napredne postavke rutiranja.
Početak rada sa Vue Routerom
Za početak rada sa Vue Routerom, koristite sledeću npm (Node Package Manager) komandu u željenom direktorijumu kako biste kreirali vašu Vue aplikaciju:
npm create vue
Kada budete upitani da li želite da dodate Vue Router za razvoj jednostranične aplikacije, odaberite „Da“.
Nakon toga, otvorite vaš projekat u omiljenom uređivaču teksta. Direktorijum `src` vaše aplikacije bi trebao da sadrži folder `router`.
Folder `router` sadrži fajl `index.js` koji uključuje JavaScript kod za upravljanje rutama u vašoj aplikaciji. Fajl `index.js` uvozi dve funkcije iz paketa `vue-router`: `createRouter` i `createWebHistory`.
Funkcija `createRouter` kreira novu konfiguraciju rute na osnovu objekta. Ovaj objekat sadrži ključeve `history` i `routes` zajedno sa njihovim vrednostima. Ključ `routes` je niz objekata koji detaljno opisuju postavke svake rute, kao što je prikazano na gornjoj slici.
Nakon što konfigurišete svoje rute, potrebno je da eksportujete ovu instancu rutera i importujete je u fajl `main.js`:
import './assets/main.css'import { createApp } from 'vue'
import App from './App.vue'
import router from './router'const app = createApp(App)
app.use(router)
app.mount('#app')
Uvezli ste funkciju rutera u `main.js` fajl, a zatim ste omogućili vašoj Vue aplikaciji da koristi ovu funkciju rutera pomoću metode `use`.
Sada možete primeniti svoje rute u vašoj Vue aplikaciji, koristeći blok koda sličan onom ispod:
<script setup>
import { RouterLink, RouterView } from 'vue-router'
</script><template>
<header>
<nav>
<RouterLink to="https://www.makeuseof.com/">Početna</RouterLink>
<RouterLink to="/about">O nama</RouterLink>
</nav>
</header><RouterView />
</template>
Gornji blok koda prikazuje upotrebu Vue Routera u Vue komponenti. Ovaj deo koda uvozi dve komponente iz biblioteke `vue-router`: `RouterLink` i `RouterView`.
Komponente `RouterLink` kreiraju linkove ka početnoj stranici i stranici „O nama“ u gornjem primeru. Atribut `to` određuje putanju do rute na koju se prebacujete kada kliknete na link. Ovde imate jedan link koji vodi ka osnovnoj ruti („/“) i drugi link koji vodi ka ruti „/about“.
Komponenta `RouterView` prikazuje komponentu koja je povezana sa trenutnom rutom. Ona funkcioniše kao čuvar mesta gde će se prikazati sadržaj trenutne rute. Kada se navigirate na drugu rutu, komponenta povezana sa tom rutom će se prikazati unutar `RouterView` komponente.
Dodavanje parametara rutama vaše aplikacije
Vue Router vam omogućava da prenosite parametre i upite rutama. Parametri su dinamički delovi URL-a, označeni dvotačkom „:“.
Da biste konfigurisali Vue Router da može da snima parametre u rutama aplikacije, podesite specifičnu rutu u fajlu `index.js`:
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: "https://www.makeuseof.com/",
name: "home",
component: HomeView,
},
{
path: "/developer/:profileNumber",
name: "developer",
component: () => import("../views/devView.vue"),
},
],
});
Gornji blok koda prikazuje instancu rutera sa dve rute: `home` i `developer`. Ruta `developer` prikazuje informacije o određenom programeru na osnovu broja profila programera.
Sada izmenite fajl `App.vue` tako da izgleda kao u sledećem kodu:
<script setup>
import { ref } from "vue";
import { RouterLink, RouterView } from "vue-router";const developer = ref([
{
name: "Chinedu",
profile: 2110,
},
]);
</script><template>
<header>
<nav>
<RouterLink to="https://www.makeuseof.com/">Početna</RouterLink>
<RouterLink :to="{ path: `/developer/${developer.profile}` }">
Profil programera
</RouterLink>
</nav>
</header><RouterView />
</template>
Gornji blok koda postavlja promenljivu `developer` kao reaktivni objekat sa dva svojstva: `name` i `profile`. Zatim, druga komponenta `RouterLink` usmerava ka komponenti `devView`. Sada možete pristupiti vrednosti parametra koji prosledite u URL u bloku šablona ili JavaScript bloku komponente `devView`.
Da bi se pristupilo ovoj vrednosti u bloku šablona komponente `devView`, Vue obezbeđuje metod `$route`, objekat koji sadrži svojstva koja detaljno navode informacije o URL adresi. Ove informacije uključuju punu putanju, upite, parametre i komponente.
Evo primera kako da pristupite profilu određenog programera u komponenti `devView` koristeći metod `$route`:
<template>
<div>
<h1>Ovo je stranica o programeru {{ $route.params.profileNumber }} </h1>
</div>
</template>
Gornji isječak koda pokazuje kako da koristite metod `$route` za pristup i prikaz vrednosti parametra `profileNumber` unutar šablona komponente.
Svojstvo `params` u metodu `$route` sadrži parametre koje definišete u ruti. Kada Vue renderuje ovu komponentu, on zamenjuje vrednost `$route.params.profileNumber` stvarnom vrednošću koju prosledite u URL-u.
Na primer, ako posetite `/developer/123`, prikazana poruka će biti „Ovo je stranica o programeru 123“.
Takođe možete pristupiti informacijama o ruti u JavaScript bloku vaše komponente. Na primer:
<script setup>
import { useRoute } from "vue-router";const route = useRoute();
</script><template>
<div>
<h1>Ovo je stranica o programeru {{ route.params.profileNumber }}</h1>
</div>
</template>
U prethodnom bloku koda, pristupili ste `$route` objektu direktno unutar šablona da biste preuzeli parametre rute. Međutim, u ažuriranom bloku koda, uvezli ste funkciju `useRoute()` iz paketa `vue-router`. Dodelili ste funkciju promenljivoj koju ste zatim koristili u šablonu vaše Vue komponente.
Sa `useRoute()`, pratite pristup API-ja kompozicije Vue 3 koristeći sistem reaktivnosti. Ovo osigurava da će se komponenta automatski ažurirati kada se parametri rute promene.
Dodavanje upita na rute vaše aplikacije
Upiti ili stringovi upita su opcioni parametri koji se dodaju URL-u nakon znaka pitanja „?“. Na primer, u ruti `/search?name=vue`, `name=vue` je string upita gde je `name` ključ, a `vue` vrednost.
Da biste dodali upit ruti u Vue Router-u, možete koristiti svojstvo `query` objekta `to` u komponenti `RouterLink`. Svojstvo `query` treba da bude objekat gde svaki par ključ-vrednost predstavlja parametar upita. Evo primera:
<RouterLink :to="{ name: 'home', query: {name: 'vue'}}">Početna</RouterLink>
Nakon što dodate upit u rutu, možete pristupiti parametrima upita u vašim Vue komponentama. Ovo možete da uradite sa `$route` objektom ili funkcijom `useRoute`, slično kao i kod dodavanja parametara rute.
Evo primera kako koristite parametar upita u komponenti:
<template>
{{ $route.query.name }}
</template>
Ovaj isječak koda prikazuje kako da pristupite i prikažete vrednost parametra upita (ime) sa URL-a koristeći objekat `$route.query` unutar šablona komponente Vue.js.
Definisanje rezervne (404) stranice
Vue Router vam omogućava da definišete rezervnu rutu koja će se podudarati kada nijedna druga ruta ne odgovara URL adresi. Ovo je korisno za prikazivanje stranice „404 nije pronađeno“.
Evo kako možete da definišete rezervnu rutu pomoću Vue Routera:
{
path:'/:pathName(.*)',
name: 'NotFound',
component: () => import('../views/NotFoundView.vue')
}
Deo `/:pathName` označava dinamički segment u URL-u, a `(.*)` je JavaScript regularni izraz koji odgovara svim znacima nakon dinamičkog segmenta. Ovo omogućava ruti da odgovara bilo kojoj putanji.
Kada korisnik dođe do URL adrese koja se ne podudara ni sa jednom drugom rutom, Vue će prikazati komponentu `NotFoundView`. Ovaj pristup koristite za rukovanje greškama 404 ili za prikaz rezervne stranice kada tražena ruta nije pronađena.
Naučite da kreirate animacije u Vue-u
Naučili ste kako da dodate parametre i upite rutama vaše aplikacije. Takođe ste naučili kako da definišete rezervnu stranicu za obradu 404 grešaka. Vue Router pruža mnogo više funkcionalnosti, kao što je postavljanje dinamičkih i ugnježđenih ruta.
Dodavanje animacija i prelaza između elemenata na web stranici može značajno poboljšati korisničko iskustvo. Morate da naučite da kreirate prelaze i animacije u Vue-u kako biste napravili glatku, privlačnu i uopšteno bolju web lokaciju.