Ghid pentru Router Vue

Introducere

Când dezvoltați aplicații web cu Vue.js, cu excepția cazului în care construiți un Aplicație pe o singură pagină (SPA), veți dori să conectați mai multe pagini la o pagină de destinație pentru a permite utilizatorilor să navigheze prin ele. Aceasta este cunoscută ca rutare.

Rutarea este procesul prin care un utilizator este navigat la diferite pagini de pe un site web. Vue.js este un cadru JavaScript folosit pentru a crea aplicații cu o singură pagină, ceea ce înseamnă că această aplicație este încărcată o singură dată de pe server în browser, iar browserul nu trebuie să se reîncarce la rutare; în schimb, pur și simplu solicită aceste pagini și sunt încărcate.

În acest ghid, vom învăța cum să facem rutare cu Vue.js și să facem o scufundare profundă în diferitele tipuri de rutare care pot fi făcute și cum pot fi făcute.

Noțiuni de bază

Rutarea în Vue.js se face cu Router Vue, care funcționează în tandem cu biblioteca de bază Vue pentru a ne permite să setăm un sistem de rutare. Am dori să folosim vue-router în două scenarii din proiectul nostru. Fie vrem să folosim routerul într-un proiect existent, fie să îl adăugam în timp ce creăm un nou proiect.

Configurați routerul Vue în proiectul existent

integrarea vue-router într-un proiect existent poate fi tehnic și vom trece peste aceste detalii acum. Primul pas ar fi să instalați pachetul router vue folosind următoarea comandă:

! npm install vue-router@4

Odată instalat, navigați la src folder și creați un folder numit router, urmat de un fișier numit index.js în router folder, care va servi drept fișier de configurare a routerului. Al nostru src directorul va arăta acum astfel:

În index.js fișier, să ne asigurăm că lipim codul de mai jos, care este codul de configurare a routerului:

import { createRouter, createWebHashHistory } from 'vue-router'
import HomePage from '../views/HomePage.vue' const routes = [ { path: '/', name: 'home', component: HomePage },
] const router = createRouter({ history: createWebHashHistory(), routes
})
export default router

Avem o routes matrice care conține un singur obiect, care ar putea fi mai multe obiecte în care fiecare obiect reprezintă o singură rută. Deocamdată, am creat doar cea care ar redirecționa către componenta paginii de pornire.

Fiecare dintre acestea routes obiectele este de obicei compusă din path, care este calea URL relativ la rădăcina site-ului, the name, care servește ca identificator și component, pe care l-am importat în partea de sus a paginii.

În afară de matricea de rute, am configurat instanța routerului în partea de jos prin crearea unui createRouter() funcţia şi trecerea în history valorile cheie și routes matrice, apoi exportăm router exemplu pentru utilizare în cadrul aplicației noastre.

Pentru a utiliza această configurație de router în cadrul aplicației noastre, deschideți main.js de fișier în src pliant, import router from "./router"și apoi adăugați .use(router) între createApp(App) și .mount('#app') asa cum este mai jos:

import router from './router' createApp(App).use(router).mount('#app')

Acest vue-router a fost configurat global în aplicația noastră, iar următorul pas este să îl folosim în aplicația noastră. Acest lucru este ușor de realizat prin includerea <router-view /> în cadrul App.js etichetă șablon, care redă numai traseul potrivit:

<!--App.vue -->
<template>
<!-- Any code placed here is going to be fixed -->
<!-- This will only show the page that matches the selected route --> <router-view /> <!-- Any code placed here is going to be fixed -->
</template> <script> export default { name: 'App', }
</script>

Configurarea rutelor în Vue.js

Rutele sunt de obicei create în router/index.js matricea de rute ale fișierului, iar aceste rute se conectează la componente. Este o practică bună să creați un folder de vizualizări în care vor fi stocate toate vizualizările de pagină. De exemplu:

În acest moment, acum știm cum să setăm rutele manual.

Instalați Router-ul Vue cu Vue CLI

Dacă suntem pe cale să creăm un nou proiect și credem că îl vom folosi vue-router, este mai ușor să faceți acest lucru în timpul creării proiectului.

Tot ce trebuie să facem este să folosim Vue CLI pentru a instala cea mai recentă versiune a vue-router în timp ce selectați manual caracteristicile în procesul de creare a proiectului nostru:

Citiți și aflați mai multe despre crearea proiectului Vue.js prin intermediul nostru Ghid pentru Vue CLI!

Rute de încărcare leneșă cu Router Vue

Pe măsură ce aplicația noastră crește în dimensiune, dimensiunea pachetului crește, ceea ce face ca site-ul nostru să dureze mai mult pentru încărcare. Putem folosi vue-router pentru a implementa încărcare leneră pentru a evita încărcarea unor rute specifice până când utilizatorul le solicită în mod expres.

Acest lucru se realizează de obicei în fișierul de configurare a routerului prin eliminarea import declarație în partea de sus și înlocuirea acesteia cu o declarație de import dinamic în opțiunea de componentă a rutei noastre:

import { createRouter, createWebHashHistory } from 'vue-router';
const routes = [ { path: '/', name: 'home', component: () => import(/* webpackChunkName: "home" */ '../views/HomePage.vue'), }, { path: '/about', name: 'about', component: () => import(/* webpackChunkName: "about" */ '../views/AboutPage.vue'), },
];
const router = createRouter({ history: createWebHashHistory(), routes,
});
export default router;

Navigarea între rute cu

Până acum, am reușit să creăm rute, dar cum navigăm în aplicația noastră? Noi folosim <router-link> eticheta în loc de <a> element în HTML pentru a gestiona rutarea.

De exemplu, dacă dorim să creăm o bară de navigare în partea de sus a aplicației noastre, am putea face acest lucru în App.js fişier deasupra <router-view/> etichetă astfel încât să se afișeze pe toate rutele:

<nav> <router-link to="/">Home</router-link> | <router-link to="/about">About</router-link>
</nav>

Router-link acceptă to='path' atribut care duce utilizatorul la calea componentei așa cum a fost stabilită la configurarea rutei. Aceasta funcționează ca href='path``' atribut în HTML.

Utilizarea rutelor numite

Utilizarea rutelor numite ne permite să trecem în name cheie care are acces la name proprietate pe care o setăm în timp ce configurăm rutele în loc să folosim calea legând datele astfel:

<router-link :to="{ name: 'About' }">About</router-link>

Un avantaj al utilizării acestei metode este că, în cazul în care decidem să schimbăm calea rutei pentru aplicațiile noastre mari, nu trebuie să începem să schimbăm toate căile legăturilor, care ar putea fi greoaie.

Rutare dinamică

Pot apărea situații care necesită utilizarea de rutare dinamică pentru a evita repetarea inutilă a paginii. De exemplu, să presupunem că avem o listă de fructe și dorim ca un utilizator să poată face clic pe un anumit fruct și numai detalii despre acel fruct sunt afișate pe o pagină cu detalii despre fructe. În acest caz, folosim rutarea dinamică.

Am avea două pagini – una pentru a prezenta fructele într-o listă și una pentru a afișa detaliile fiecărui fruct, care este o pagină „schemă” care trebuie completată cu detaliile fructului. Vom crea paginile în folderul Vue și apoi vom adăuga rutele la routes matrice:

import FruitsPage from '../views/FruitsPage.vue';
import FruitDetails from '../views/FruitDetails.vue'; const routes = [ { path: '/fruits', name: 'Fruits', component: FruitsPage, }, { path: '/fruits/:id', name: 'FruitDetails', component: FruitDetails, },
];

Vom observa că pentru FruitDetails pagina, am adăugat o dinamică id proprietate astfel încât să primească id parametrul și îl folosește pentru a interoga anumite date care apar pe pagina respectivă folosind $route.params în șablonul nostru, făcând astfel traseul dinamic.

În FruitsPage, să presupunem că avem o serie de fructe pe care le introducem în aplicația noastră, putem împacheta fiecare fruct cu un link alături de parametri în acest fel:

<!-- FruitsPage.vue --> <template> <h1>Fruits page</h1> <div :key="fruit.id" v-for="fruit in fruits"> // dynamic linking by attaching the id as params <router-link :to="{ name: 'FruitDetails', params: { id: fruit.id } }"> <h3>{{ fruit.name }}</h3> </router-link> </div>
</template> <script> export default { data() { return { fruits: [ { id: 1, name: 'Apple', description: "Apples are an incredibly nutritious fruit.", }, { id: 2, name: 'Mango', description: 'A mango is an edible stone fruit produced by the tropical.', }, { id: 3, name: 'Banana', description: 'A banana is an elongated, edible fruit of the genus Musa.', }, ], }; }, };
</script>

În acest moment, când un utilizator face clic pe fiecare fruct, îl va duce la FruitDetails pagina de unde putem accesa id parametrul și utilizați-l pentru a identifica detaliile fructelor care trebuie afișate în FruitDetails .

Accesați parametrii rutei

Până acum am văzut cum să transmitem parametrii unei anumite pagini în mod dinamic, să vedem acum cum putem accesa acel parametru în FruitDetails pagină. Există două moduri prin care putem accesa parametrii în Vue - prin $route.params sau folosind recuzită:

Utilizarea $route.params

Parametrii sunt accesibili direct prin $route.params:

<template> <h1>Fruit Details</h1> <p>This is fruit with the id of {{ $route.params.id }}</p>
</template>

Sau îl putem accesa în interiorul nostru data() folosind metoda this:

<template> <h1>Fruit Details</h1> <p>This is fruit with the id of {{ id }}</p>
</template> <script> export default { data() { return { id: this.$route.params.id, }; }, };
</script>

Folosind Vue Props

O altă metodă ușoară de a accesa datele în mod dinamic prin rute este utilizarea elementelor de recuzită. Mai întâi trebuie să setăm props la true în obiectul de configurare a rutelor:

{ path: '/fruits/:id', name: 'FruitDetails', component: FruitDetails, props: true,
},

În acest fel, tot ce trebuie să facem în continuare este să adăugăm props opțiune la script etichetați și apoi folosiți recuzita din cadrul nostru template etichetă:

<template> <h1>Fruit Details</h1> <p>This is fruit with the id of {{ id }}</p>
</template> <script> export default { props: ['id'], };
</script>

Erori 404 – Rută nu a fost găsită

În cazul în care un utilizator navighează către o rută inexistentă, Vue va încărca pagina, dar fără componente, producând o pagină goală. În acest caz, cel mai bun lucru de făcut este să afișați o pagină 404 cu poate un buton care îi conduce către pagina de pornire sau oriunde credem că ar dori să meargă.

Acest lucru este ușor de gestionat prin crearea unei componente pentru pagina noastră 404 și apoi adăugarea unei rute 404 la matricea de rute ale fișierului nostru de configurare a routerului, dar de data aceasta vom folosi o expresie regulată pentru a captura toate rutele care nu au fost declarate anterior:

{ path: '/:catchAll(.*)', name: 'ErrorPage', component: ErrorPage,
}

:catchAll este segmentul dinamic care primește o expresie regulată a (.*) în care Vue Router îl folosește pentru a verifica dacă ruta către care navighează utilizatorul este definită în fișierul de configurare al routerului nostru. Dacă astfel de rute nu există, utilizatorul este direcționat către componenta, care în cazul nostru este ErrorPage componentă:

<template> <h2>404 Page</h2> <p>This is a 404 page</p> <p>Visit home page <router-link to="/">here</router-link></p>
</template>

Redirecționări

Într-o situație în care dorim ca utilizatorii să fie redirecționați atunci când vizitează o anumită rută, de exemplu, dacă am avut o rută anterioară pe care nu o mai folosim, dorim ca utilizatorii să fie redirecționați către noul traseu atunci când vizitează acea rută. Acest lucru este ușor de realizat prin adăugarea unui nou obiect la matricea noastră de configurare a rutelor, cu a redirect camp:

{ path: '/fruits', name: 'Fruits', component: FruitsPage,
},
{ path: '/all-frults', redirect: '/fruits',
},

Tot ceea ce face codul de mai sus este că, dacă un utilizator vizitează, calea /all-fruits, le-ar redirecționa către /fruits ruta.

Navigare programatică

Până acum, am învățat multe despre rutare, dar mai este un lucru pe care veți dori să știți: cum să efectuați navigarea programatică. Definim navigarea programatică ca o situație în care un utilizator este redirecționat/direcționat pe baza unei acțiuni specifice care are loc pe o rută, cum ar fi o acțiune de conectare sau de înscriere, sau făcând clic pe un anumit buton, cum ar fi un buton „du-te înapoi”.

Istoricul routerului

Putem folosi istoricul browserului pentru a naviga cu ușurință înapoi sau înainte, în funcție de preferințele noastre. Dacă vă amintiți, avem un createRouter() funcția în fișierul de configurare a routerului unde am setat a history valoare, permițând routerului Vue să țină evidența istoricului router-ului nostru pe măsură ce trecem prin aplicația web.

Acest lucru ne permite să parcurgem istoricul browserului, pe baza unei condiții, cum ar fi un clic pe buton:

<template> <h1>Fruit Details</h1> <p>This is fruit with the id of {{ id }}</p> <button @click="goBack">Go Back</button>
</template> <script> export default { props: ['id'], methods:{ goBack(){ this.$router.go(-1) } } };
</script>

De asemenea, putem decide să mergem înainte utilizând 1 în loc de -1 și să presupunem că vrem să ne mișcăm cu 2 pași, putem folosi oricare 2 or -2.

Împinge

push() este de obicei folosit după ce a avut loc o acțiune și adaugă o nouă intrare în stiva de istoric. De exemplu, dacă un utilizator se conectează cu succes, am dori să fim navigați la pagina tabloului de bord în mod programatic. Acest lucru se realizează prin includerea metodei push alături de numele rutei:

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

Concluzie

Rutarea este una dintre funcționalitățile de bază ale Vue. Dacă nu construiești un Aplicație pe o singură pagină (SPA), veți dori să conectați mai multe pagini la o pagină de destinație pentru a permite utilizatorilor să navigheze prin ele.

În acest ghid, am aruncat o privire la ce este rutarea, cum puteți instala vue-router în proiectele noi și existente, cum să efectuați încărcare leneșă, să navigați între rute, să efectuați rutarea dinamică, să accesați parametrii rutei și să efectuați navigarea programatică.

• Coinsmart. Cel mai bun schimb de Bitcoin și Crypto din Europa.
• Platoblockchain. Web3 Metaverse Intelligence. Cunoștințe amplificate. ACCES LIBER.
• CryptoHawk. Radar Altcoin. Încercare gratuită.
• Sursa: https://stackabuse.com/guide-to-vue-router/