Cos'è vue-router?

Vue Router: Gestione della Navigazione nelle Applicazioni Vue.js

Vue Router è la libreria ufficiale di routing per Vue.js. Fornisce un meccanismo dichiarativo per mappare URL a componenti e gestire la navigazione all'interno di un'applicazione Vue senza ricaricare la pagina. È essenziale per la creazione di applicazioni Single-Page Application (SPA) con Vue.

Concetti Chiave:

• Router%20Instance: L'istanza del router funge da "motore" di navigazione. Viene creata utilizzando createRouter e configurata con la cronologia e le rotte.

• Route: Una route definisce una corrispondenza tra un URL e un componente. Specifica l'URL (path), il componente da visualizzare e, opzionalmente, altre proprietà come nome, meta dati e funzioni di guardia.

• Cronologia%20delle%20Rotte: Vue Router offre diverse modalità di cronologia, tra cui:

  • createWebHistory: Utilizza l'API History del browser per URL puliti (es. /users/123). Richiede la configurazione del server per funzionare correttamente.
  • createWebHashHistory: Utilizza l'hash nell'URL (es. /#/users/123). Non richiede configurazione del server.
  • createMemoryHistory: Mantiene la cronologia delle rotte in memoria. Utile per test o ambienti non browser.

• Componente%20<router-view>: Un componente funzionale che visualizza il componente corrispondente alla route corrente. È il punto di inserimento dinamico del contenuto basato sulla navigazione.

• Componente%20<router-link>: Un componente che crea link di navigazione. Internamente, utilizza l'API del router per cambiare l'URL e visualizzare il componente corretto senza ricaricare la pagina. Gestisce automaticamente le classi active per lo stile del link attivo.

• Navigazione%20Programmatica: Permette di navigare tramite codice JavaScript, utilizzando metodi come router.push() e router.replace(). Utile per reindirizzamenti, azioni successive a eventi, etc.

• Parametri%20delle%20Rotte: Consentono di catturare segmenti dinamici nell'URL (es. /users/:id). I parametri sono accessibili nel componente corrispondente tramite $route.params.

• Query%20Parameters: Dati aggiuntivi passati nell'URL dopo il punto interrogativo (es. /users?sort=name&page=2). Accessibili tramite $route.query.

• Named%20Routes: Assegnare un nome alle rotte permette di navigare utilizzando il nome della route piuttosto che l'URL, rendendo il codice più leggibile e mantenibile.

• Named%20Views: Permette di visualizzare più componenti contemporaneamente nella stessa pagina, utilizzando router-view multipli con nomi diversi.

• Route%20Guards: Funzioni che intercettano la navigazione per eseguire azioni come autenticazione, autorizzazione o logging. Esistono guardie globali, per-route e in-componente. Esempi includono beforeEach, beforeEnter, e beforeRouteEnter.

• Meta%20Fields: Permettono di aggiungere dati arbitrari (metadati) alle definizioni delle rotte. Possono essere utilizzati per controllare il layout, le autorizzazioni o altre proprietà specifiche di ogni route.

Utilizzo Base:

1. Installazione: npm install vue-router@4

2. Creazione dell'Istanza del Router:

   import { createRouter, createWebHistory } from 'vue-router'
   import Home from './components/Home.vue'
   import About from './components/About.vue'
   
   const routes = [
     { path: '/', component: Home },
     { path: '/about', component: About }
   ]
   
   const router = createRouter({
     history: createWebHistory(),
     routes
   })
   
   export default router
   

3. Integrazione in Vue:

   import { createApp } from 'vue'
   import App from './App.vue'
   import router from './router'
   
   const app = createApp(App)
   app.use(router)
   app.mount('#app')
   

4. Utilizzo dei Componenti router-link e router-view nel Template:

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

Vue Router è uno strumento potente e flessibile per la gestione della navigazione nelle applicazioni Vue.js. La sua comprensione è fondamentale per lo sviluppo di SPA complesse e ben strutturate.