Vue Router, il router ufficiale di Vue, consente di creare applicazioni a pagina singola (SPA) in Vue. Vue Router ti consente di mappare i componenti della tua app Web su diversi percorsi del browser, gestire lo stack cronologico della tua app e impostare opzioni di routing avanzate.
Sommario:
Guida introduttiva al router Vue
Per iniziare con Vue Router, esegui il seguente comando npm (Node Package Manager) nella tua directory preferita per creare la tua applicazione Vue:
npm create vue
Quando viene richiesto se aggiungere Vue Router per lo sviluppo di applicazioni a pagina singola, selezionare Sì.
Successivamente, apri il tuo progetto nel tuo editor di testo preferito. La directory src della tua app dovrebbe includere una cartella del router.
La cartella del router contiene un file index.js contenente il codice JavaScript per la gestione dei percorsi nella tua applicazione. Il file index.js importa due funzioni dal pacchetto vue-router: createRouter e createWebHistory.
La funzione createRouter crea una nuova configurazione di route da un oggetto. Questo oggetto contiene le chiavi della cronologia e delle route e i relativi valori. La chiave delle rotte è una matrice di oggetti che descrivono in dettaglio la configurazione di ciascuna rotta, come mostrato nell’immagine sopra.
Dopo aver configurato i tuoi percorsi, devi esportare questa istanza del router e importare questa istanza nel file 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')
Hai importato la funzione del router nel file main.js e poi hai fatto in modo che l’app Vue utilizzasse questa funzione del router con il metodo use.
Puoi quindi applicare i tuoi percorsi alla tua app Vue strutturando un blocco di codice simile a quello qui sotto:
<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>
Il blocco di codice sopra mostra l’uso del router Vue in un componente Vue. Il frammento di codice importa due componenti dalla libreria vue-router: RouterLink e RouterView.
I componenti RouterLink creano collegamenti alle pagine Home e Informazioni nello snippet di codice precedente. L’attributo to specifica il percorso della rotta che navighi quando fai clic sul collegamento. Qui, hai un collegamento che punta al percorso radice (“/”) e un altro collegamento che punta al percorso “/about”.
Il componente esegue il rendering del componente associato al percorso corrente. Funge da segnaposto in cui verrà visualizzato il contenuto del percorso corrente. Quando navighi verso un percorso diverso, il componente associato a tale percorso verrà visualizzato all’interno del componente.
Aggiunta di parametri ai percorsi dell’applicazione
Vue Router ti consente di passare parametri e query ai percorsi. I parametri sono parti dinamiche dell’URL, indicate da due punti “:”.
Per impostare il tuo router Vue in modo che sia in grado di acquisire i parametri nei percorsi dell’app, configura il percorso specifico nel tuo file 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"),
},
],
});
Il blocco di codice sopra mostra un’istanza del router con due route: home e developer. Il percorso dello sviluppatore mostra le informazioni su un particolare sviluppatore in base al numero del profilo dello sviluppatore.
Ora modifica il tuo file App.vue in modo che assomigli allo snippet di codice seguente:
<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>
Il blocco di codice precedente imposta la variabile sviluppatore come oggetto reattivo con due proprietà: nome e profilo. Quindi, il secondo componente RouterLink indirizza al componente devView. Ora puoi accedere al valore del parametro che passi nell’URL nel blocco modello o nel blocco JavaScript del componente devView.
Per accedere a questo valore nel blocco modello del componente devView, Vue fornisce un metodo $route, un oggetto contenente proprietà che descrivono in dettaglio le informazioni dell’URL. Queste informazioni includono fullPath, query, parametri e componenti.
Ecco un esempio di come accedere al particolare profilo dello sviluppatore nel componente devView con il metodo $route:
<template>
<div>
<h1>This is developer {{ $route.params.profileNumber }} about page</h1>
</div>
</template>
Il frammento di codice precedente mostra come utilizzare il metodo $route per accedere e visualizzare il valore del parametro profileNumber all’interno del modello del componente.
La proprietà params nel metodo $route contiene i parametri che definisci in un percorso. Quando Vue esegue il rendering di questo componente, sostituisce il valore di $route.params.profileNumber con il valore effettivo passato nell’URL.
Ad esempio, se visiti /developer/123, il messaggio visualizzato è “Questa è la pagina informazioni dello sviluppatore 123”.
Puoi anche accedere alle informazioni sul percorso nel blocco JavaScript del tuo componente. Per esempio:
<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>
Nel blocco di codice precedente, accedevi all’oggetto $route direttamente all’interno del modello per recuperare i parametri di route. Tuttavia, nel blocco di codice aggiornato, hai importato la funzione useRoute() dal pacchetto vue-router. Hai assegnato la funzione a una variabile che hai poi utilizzato nel modello del tuo componente Vue.
Con useRoute(), segui l’approccio dell’API di composizione di Vue 3 sfruttando il sistema di reattività. Ciò garantisce che il componente si aggiornerà automaticamente quando i parametri del percorso cambiano.
Aggiunta di query ai percorsi dell’applicazione
Le query, o stringhe di query, sono parametri facoltativi aggiunti all’URL dopo un punto interrogativo “?”. Ad esempio, nella route “/search?name=vue”, “name=vue” è una stringa di query in cui name è la chiave e vue è il valore.
Per aggiungere una query a un percorso in Vue Router, puoi utilizzare la proprietà query dell’oggetto to nel componente RouterLink. La proprietà della query deve essere un oggetto in cui ogni coppia chiave-valore rappresenta un parametro della query. Ecco un esempio:
<RouterLink :to="{ name: 'home', query: {name: 'vue'}}">Home</RouterLink>
Dopo aver aggiunto una query a un percorso, puoi accedere ai parametri della query nei tuoi componenti Vue. Puoi farlo con l’oggetto $route o la funzione useRoute, simile all’aggiunta di parametri di route.
Ecco un esempio di come si utilizza un parametro di query in un componente:
<template>
{{ $route.query.name }}
</template>
Questo frammento di codice mostra come accedere e visualizzare il valore di un parametro di query (nome) dall’URL utilizzando l’oggetto $route.query all’interno del modello di un componente Vue.js.
Definizione di una pagina di fallback (404).
Vue Router ti consente di definire un percorso di fallback che verrà abbinato quando nessun altro percorso corrisponde all’URL. Questo è utile per visualizzare una pagina “404 Not Found”.
Ecco come puoi definire un percorso di fallback con Vue Router:
{
path:'/:pathName(.*)',
name: 'NotFound',
component: () => import('../views/NotFoundView.vue')
}
La parte /:pathName indica un segmento dinamico nell’URL e (.*) è un’espressione regolare JavaScript che corrisponde a qualsiasi carattere dopo il segmento dinamico. Ciò consente al percorso di corrispondere a qualsiasi percorso.
Quando un utente accede a un URL che non corrisponde a nessun altro percorso, Vue eseguirà il rendering del componente NotFoundView. Puoi utilizzare questo approccio per gestire gli errori 404 o visualizzare una pagina di fallback quando non viene trovata una route richiesta.
Impara a creare animazioni in Vue
Hai imparato come aggiungere parametri e query ai percorsi della tua applicazione. Hai anche imparato a definire una pagina di fallback per gestire gli errori 404. Vue Router offre molte più funzionalità, come l’impostazione di percorsi dinamici e nidificati.
L’aggiunta di animazioni e transizioni tra elementi su una pagina Web può migliorare notevolmente l’esperienza dell’utente. Devi imparare a creare transizioni e animazioni in Vue per creare un sito Web più fluido, più coinvolgente e complessivamente migliore.