Cum să gestionați rutarea în Vue cu Router-ul Vue

Vue Router, routerul oficial pentru Vue, face posibilă construirea de aplicații cu o singură pagină (SPA) în Vue. Vue Router vă permite să mapați componentele aplicației dvs. web pe diferite rute ale browserului, să gestionați istoricul aplicației și să configurați opțiuni avansate de rutare.

Noțiuni introductive cu routerul Vue

Pentru a începe cu Vue Router, rulați următoarea comandă npm (Node Package Manager) în directorul dvs. preferat pentru a vă crea aplicația Vue:

 npm create vue 

Când vi se solicită să adăugați Router Vue pentru dezvoltarea aplicației cu o singură pagină, selectați Da.

Apoi, deschideți proiectul în editorul de text preferat. Directorul src al aplicației dvs. ar trebui să includă un folder de router.

Dosarul routerului găzduiește un fișier index.js care conține codul JavaScript pentru gestionarea rutelor în aplicația dvs. Fișierul index.js importă două funcții din pachetul vue-router: createRouter și createWebHistory.

Funcția createRouter creează o nouă configurație de rută dintr-un obiect. Acest obiect conține cheile de istorie și trasee și valorile acestora. Cheia rutelor este o serie de obiecte care detaliază configurația fiecărei rute, așa cum se vede în imaginea de mai sus.

După configurarea rutelor, trebuie să exportați această instanță de router și să importați această instanță în fișierul 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')
 

Ați importat funcția de router în fișierul main.js și apoi ați făcut ca aplicația Vue să folosească această funcție de router cu metoda de utilizare.

Apoi, puteți aplica rutele în aplicația Vue prin structurarea unui bloc de cod similar celui de mai jos:

 <script setup>
import { RouterLink, RouterView } from 'vue-router'
</script>
<template>
  <header>
    <nav>
      <RouterLink to="https://www.makeuseof.com/">Home</RouterLink>
      <RouterLink to="/about">About</RouterLink>
    </nav>
  </header>
  <RouterView />
</template>
 

Blocul de cod de mai sus demonstrează utilizarea Router-ului Vue într-o componentă Vue. Fragmentul de cod importă două componente din biblioteca vue-router: RouterLink și RouterView.

Componentele RouterLink creează link-uri către paginile Acasă și Despre în fragmentul de cod de mai sus. Atributul to specifică calea către ruta pe care o navigați când faceți clic pe link. Aici, aveți un link care indică către ruta rădăcină („/”) și un alt link care indică către ruta „/despre”.

Componenta redă componenta asociată rutei curente. Acesta acționează ca un substituent unde va fi redat conținutul rutei curente. Când navigați către o altă rută, componenta asociată rutei respective va fi redată în interiorul componentei.

Adăugarea de parametri la rutele aplicației dvs

Vue Router vă permite să transmiteți parametri și interogări rutelor. Parametrii sunt părți dinamice ale adresei URL, notate cu două puncte „:”.

Pentru a seta Router-ul Vue pentru a putea captura parametrii în rutele aplicației, configurați ruta specifică în fișierul 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"),
    },
  ],
});

Blocul de cod de mai sus arată o instanță de router cu două rute: acasă și dezvoltator. Ruta dezvoltatorului afișează informații despre un anumit dezvoltator pe baza numărului de profil al dezvoltatorului.

Acum modificați fișierul App.vue pentru a arăta ca fragmentul de cod de mai jos:

 
<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/">Home</RouterLink>
      <RouterLink :to="{ path: `/developer/${developer.profile}` }">
       Dev Profile
     </RouterLink>
    </nav>
  </header>
  <RouterView />
</template>
 

Blocul de cod de mai sus setează variabila dezvoltator ca obiect reactiv cu două proprietăți: nume și profil. Apoi, a doua componentă RouterLink este direcționată către componenta devView. Acum puteți accesa valoarea parametrului pe care îl treceți în adresa URL din blocul șablon sau blocul JavaScript al componentei devView.

Pentru a accesa această valoare în blocul șablon al componentei devView, Vue oferă o metodă $route, un obiect care conține proprietăți care detaliază informațiile URL-ului. Aceste informații includ fullPath, interogări, parametri și componente.

Iată un exemplu despre cum să accesați profilul unui anumit dezvoltator în componenta devView cu metoda $route:

 
<template>
  <div>
    <h1>This is developer {{ $route.params.profileNumber }} about page</h1>
  </div>
</template>

Fragmentul de cod de mai sus demonstrează cum să utilizați metoda $route pentru a accesa și afișa valoarea parametrului profileNumber în șablonul componentei.

Proprietatea params din metoda $route deține parametrii pe care îi definiți într-o rută. Când Vue redă această componentă, înlocuiește valoarea $route.params.profileNumber cu valoarea reală pe care o transmiteți în adresa URL.

De exemplu, dacă vizitați /developer/123, mesajul afișat este „Acesta este pagina despre dezvoltatorul 123”.

De asemenea, puteți accesa informațiile despre rută în blocul JavaScript al componentei dvs. De exemplu:

 
<script setup>
import { useRoute } from "vue-router";
const route = useRoute();
</script>
<template>
  <div>
    <h1>This is developer {{ route.params.profileNumber }} about page</h1>
  </div>
</template>
 

În fostul bloc de cod, ați accesat obiectul $route direct în șablon pentru a prelua parametrii rutei. Cu toate acestea, în blocul de cod actualizat, ați importat funcția useRoute() din pachetul vue-router. Ați atribuit funcția unei variabile pe care apoi ați folosit-o în șablonul componentei Vue.

Cu useRoute(), urmați abordarea API de compoziție a Vue 3, utilizând sistemul de reactivitate. Acest lucru asigură că componenta se va actualiza automat atunci când parametrii rutei se schimbă.

Adăugarea de interogări la rutele aplicației dvs

Interogările sau șirurile de interogare sunt parametri opționali adăugați la adresa URL după semnul de întrebare „?”. De exemplu, în ruta „/search?name=vue”, „name=vue” este un șir de interogare unde name este cheia și vue este valoarea.

Pentru a adăuga o interogare la o rută în Vue Router, puteți utiliza proprietatea de interogare a obiectului în componenta RouterLink. Proprietatea de interogare ar trebui să fie un obiect în care fiecare pereche cheie-valoare reprezintă un parametru de interogare. Iată un exemplu:

 <RouterLink :to="{ name: 'home', query: {name: 'vue'}}">Home</RouterLink>

După ce adăugați o interogare la o rută, puteți accesa parametrii de interogare din componentele Vue. Puteți face acest lucru cu obiectul $route sau cu funcția useRoute, similar cu adăugarea parametrilor de rută.

Iată un exemplu despre cum utilizați un parametru de interogare într-o componentă:

 
<template>
  {{ $route.query.name }}
</template>

Acest fragment de cod demonstrează cum să accesați și să redați valoarea unui parametru de interogare (nume) din adresa URL folosind obiectul $route.query din șablonul unei componente Vue.js.

Definirea unei pagini de rezervă (404).

Vue Router vă permite să definiți o rută alternativă care va fi potrivită atunci când nicio altă rută nu se potrivește cu adresa URL. Acest lucru este util pentru afișarea unei pagini „404 Not Found”.

Iată cum puteți defini o rută alternativă cu Router-ul Vue:

     {
      path:'/:pathName(.*)',
      name: 'NotFound',
      component: () => import('../views/NotFoundView.vue')
    }

Partea /:pathName indică un segment dinamic în adresa URL, iar (.*) este o expresie regulată JavaScript care se potrivește cu orice caractere după segmentul dinamic. Acest lucru permite traseului să se potrivească cu orice cale.

Când un utilizator navighează la o adresă URL care nu se potrivește cu alte rute, Vue va afișa componenta NotFoundView. Utilizați această abordare pentru a gestiona erorile 404 sau pentru a afișa o pagină de rezervă atunci când o rută solicitată nu este găsită.

Învață să creezi animații în Vue

Ați învățat cum să adăugați parametri și interogări la rutele aplicației dvs. De asemenea, ați învățat cum să definiți o pagină de rezervă pentru a gestiona erorile 404. Vue Router oferă mult mai multe funcționalități, cum ar fi setarea rutelor dinamice și imbricate.

Adăugarea de animații și tranziții între elemente de pe o pagină web poate îmbunătăți semnificativ experiența utilizatorului. Trebuie să învățați să creați tranziții și animații în Vue pentru a crea un site web mai fluid, mai captivant și, în general, mai bun.