Vue.js: navighiamo tra le viste con vue-router

Il routing è fondamentale in tutte le SPA (Single Page Application) per delineare la navigazione tra le viste dell’applicazione.

In Vue.js questo compito è affidato al package vue-router che con poche righe di codice implementa l’infrastruttura necessaria.

Per ora consideriamo solo i passi necessari senza curarci troppo di contenuti e impostazione grafica.

Come al solito partiamo dall’installazione con

npm install vue-router --save

Per rendere il codice più pulito aggiungiamo un file router.js o routes.js (o scegliamo qualsiasi altro nome) all’interno di una nuova cartella src/router (volendo anche all’interno della stessa src) . In questo file andremo a definire tutti i percorsi di navigazione desiderati.

vue-router

Dopo aver importato i componenti corrispondenti alle diverse pagine che vogliamo mostrare dobbiamo definire un array routes contenente una serie di oggetti così strutturati:

  • path: corrispondente al percorso che andremo a richiamare da browser
  • name: il nome associato alla route
  • component: il componente associato alla route
 Quindi nell’esempio riportato digitando l’indirizzo http://<ip-server>:<porta>/ verrà visualizzato il componente HelloWorld, mentre al path http://<ip-server>:<porta>/info corrisponderà il contenuto del componente Info.
Nel file main.js dobbiamo effettuare due piccolissime modifiche:
  1. importare il file router.js con import router from './router/router'
  2. passare la variabile router al costruttore di Vue.

vue-main

Ora non ci resta che definire una barra di navigazione con tutti i link.

Per prima cosa osserviamo che un router link deve seguire una sintassi specifica del tipo

<router-link to="/">Home</router-link>

dove l’attributo “to” è valorizzato con uno dei path riportati nelle routes.

Infine occorre aggiungere il componente

<router-view/>

affinchè venga effettuato correttamente il rendering dei vari componenti associati ai percorsi.

Per semplicità andiamo ad inserire il codice direttamente in App.vue, ma sarebbe opportuno creare un componente ad hoc NavigationBar (o con qualsiasi altro nome) da importare proprio in App.vue.

app-router-vue

Ed ecco il risultato finale

router-vue-main

router-vue-info

Anche per oggi è tutto.

Il codice è disponibile su GitHub.

 

Lascia una risposta

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

Utilizzando il sito, accetti l'invio dei cookies da parte nostra. Maggiori informazioni

Questo sito utilizza i cookies per fornire la migliore esperienza di navigazione possibile. Continuando ad utilizzarlo senza modificare le impostazioni o cliccando su "Accetta" acconsenti al loro utilizzo.

Chiudi