Routing in Vue.js con Vue Router

Vue.js è un framework progressivo per la costruzione di interfacce utente. Uno dei suoi punti di forza è la gestione del routing tramite il pacchetto ufficiale Vue Router, giunto alla versione 4.x per Vue 3. Questo sistema consente la navigazione tra componenti come se fossero pagine, mantenendo l’esperienza single-page application (SPA).

Configurazione delle rotte

Puoi configurare le rotte creando un file router.js (o index.js nella cartella router):


import { createRouter, createWebHistory } from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]

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

export default router

Integrazione nel progetto Vue

Nel file main.js o main.ts, importa il router e collegalo all'app:


import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

const app = createApp(App)
app.use(router)
app.mount('#app')

Uso del router nei componenti

Per creare la navigazione tra le pagine, usa il componente <router-link> per generare i link, e <router-view> per visualizzare il contenuto della rotta corrente:


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

Rotte dinamiche

È possibile creare rotte dinamiche con parametri. Ad esempio:


const routes = [
  { path: '/user/:id', component: UserProfile }
]

All'interno del componente, puoi accedere al parametro tramite il composable useRoute():


import { useRoute } from 'vue-router'

export default {
  setup() {
    const route = useRoute()
    const userId = route.params.id
    return { userId }
  }
}

Conclusione

Vue Router è uno strumento essenziale per costruire SPA con Vue.js. La sua sintassi semplice, la compatibilità con Vue 3 e le funzionalità avanzate come le rotte nidificate e la lazy loading lo rendono un componente fondamentale per qualsiasi applicazione moderna.

Torna su