Installare Vue Router

In questa lezione vedremo come installare Vue Router nei nostri progetti. Per l’installazione di Vue Router analizzeremo in dettaglio i passaggi da seguire per poterlo utilizzare nei nostri progetti.

Innanzitutto assicuriamoci di avere un progetto Vue già creato. Se non si ha ancora un progetto, si può crearlo utilizzando Vue CLI o un altro metodo di nostra preferenza.

Una volta pronto, ci spostiamo nella directory del progetto

cd nome_progetto

e installiamo Vue Router tramite npm o yarn:

npm install vue-router

Esplora l’universo infinito della programmazione con ’50 Algoritmi per imparare JavaScript’, il libro che trasformerà la tua passione per il codice in realtà digitale!

Acquistalo su Amazon

Creiamo i componenti per le rotte

Creiamo una cartella di nome views dentro src per contenere le viste che creeremo.

È una regola comune creare una cartella chiamata views all’interno di un progetto Vue.js per contenere i componenti che rappresentano le diverse viste o pagine dell’applicazione. Questa pratica aiuta a organizzare il codice in modo chiaro e separare le diverse parti dell’applicazione in modo che sia più facile da gestire e mantenere. All’interno della cartella views, è possibile creare sottocartelle per raggruppare ulteriormente i componenti in base alle funzionalità o alla struttura dell’applicazione. Ad esempio, si potrebbe avere una sottocartella auth per i componenti relativi all’autenticazione e una sottocartella dashboard per i componenti della dashboard dell’applicazione.

Dunque creiamo le due pagine di base per il nostro progetto di esempio. Dapprima creiamo la pagina home, dove per il momento inseriamo solo un titolo ed una semplice frase. Ecco un possibile esempio:

<!-- HomeView.vue -->

<template>
  <div>
    <h1>Home Page</h1>
    <p>Welcome to our awesome app!</p>
  </div>
</template>

<script>
export default {
  // Logica del componente
}
</script>

E poi creiamo la pagina About, anche in questa inseriamo un titolo ed una semplice frase:

<!-- AboutView.vue -->

<template>
  <div>
    <h1>About Us</h1>
    <p>Learn more about our team and mission.</p>
  </div>
</template>

<script>
export default {
  // Logica del componente
}
</script>

Quindi utilizziamo le rotte definite all’interno del nostro file di configurazione di Vue Router all’interno del nostro template dell’App Vue:

<!-- App.vue -->

<template>
  <div id="app">
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  // Logica del componente
}
</script>

Installazione di Vue Router – Configurazione

Ora che Vue Router è installato, possiamo configurarlo all’interno della tua applicazione. Creiamo un nuovo file di configurazione per Vue Router, ad esempio router.js, e definiamo le rotte:

// router.js

import { createRouter, createWebHistory } from 'vue-router'; 
// Importa le funzioni createRouter e createWebHistory da Vue Router
import HomeView from './views/HomeView.vue';
import AboutView from './views/AboutView.vue';

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    component: AboutView
  }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

Spieghiamo in dettaglio il funzionamento del file router.js:

Importazione delle funzioni di routing: Nella prima riga, stiamo importando due funzioni essenziali da Vue Router: createRouter e createWebHistory. Queste funzioni ci consentono di creare un’istanza del router Vue e specificare il tipo di history mode da utilizzare.
In particolare utilizziamo createWebHistory per l’history mode basato su HTML5 ovvero per gestire la navigazione dell’applicazione tramite la storia del browser, consentendo di modificare l’URL senza ricaricare la pagina. Il metodo createWebHistory() crea un’istanza di history mode HTML5, che consente di utilizzare percorsi di navigazione puliti senza hash (#) negli URL dell’applicazione. Se stiamo utilizzando invece il fallback mode (simile all’hash mode) o se si sta eseguendo l’applicazione Vue in un ambiente che non supporta il history mode HTML5, si può utilizzare createWebHashHistory()che crea un’istanza di fallback mode che include hash negli URL dell’applicazione (http://example.com/#/about).
Definizione delle rotte: Definiamo un array routes che contiene oggetti che rappresentano le rotte dell’applicazione. Ogni oggetto di rotta ha tre proprietà principali:
- path: Il percorso dell’URL corrispondente alla rotta.
- name: Il nome univoco della rotta.
- component: Il componente Vue associato alla rotta.
Creazione dell’istanza del router: Utilizzando la funzione createRouter, passiamo un oggetto di configurazione che include l’istanza di history creata con createWebHistory e l’array delle rotte definite.
Esportazione del router: Esportiamo l’istanza del router in modo che possa essere utilizzata nell’intera applicazione.

Installazione di Vue Router – Integrazione nell’App Vue

Adesso occorre integrare Vue Router all’interno della nostra applicazione Vue. Apriamo il file principale della nostra app, di solito main.js, e importiamo e utilizziamo Vue Router:

import { createApp } from 'vue'; // Importa la funzione createApp da Vue 3
import App from './App.vue';
import router from './router';

const app = createApp(App); 
// Crea un'istanza dell'applicazione utilizzando la funzione createApp
app.use(router); // Usa il router

app.mount('#app'); 
// Monta l'applicazione nell'elemento con id "app" nel DOM

Testate il progetto di esempio e personalizzatelo a vostro piacimento.

Conclusioni

In questa lezione abbiamo visto come installare ed utilizzare di Vue Router nei nostri progetti. Vue Router è uno strumento potente per gestire le rotte all’interno delle applicazioni Vue.js, consentendo la creazione di applicazioni a pagina singola (SPA) e la navigazione tra diverse viste in modo fluido e intuitivo. La sua semplice configurazione e flessibilità lo rendono una scelta popolare tra gli sviluppatori Vue.js. Con Vue Router, è possibile definire e gestire le rotte in modo chiaro e organizzato, migliorando l’esperienza dell’utente e la manutenibilità del codice. Installare Vue Router è semplice e veloce grazie ad npm, e una volta configurato, offre una solida base per la creazione di applicazioni web moderne e dinamiche.