Vue Academy · Lezione

Configurazione di Vue Router

Installi Vue Router e definisca le prime route.

Configurazione di Vue Router è una lezione Vue Academy gratuita su CoddyKit. Questa è la lezione 1 di 3. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Vue Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Vue Academy include 3 lezioni in totale.

Che cos'è Vue Router?

Vue Router è la libreria ufficiale per il routing in Vue.

Mappa gli URL ai componenti
Consente la navigazione nelle single-page application senza ricaricare completamente la pagina
Gestisce cronologia, link e parametri

Installare Vue Router

Aggiungere Vue Router al progetto con npm.

# Install Vue Router 4 (for Vue 3)
npm install vue-router

# Or have it added during npm create vue@latest

Creare i componenti delle route

Ogni route esegue il rendering di un componente. Iniziare con semplici componenti di pagina.

<!-- Home.vue -->
<template>
  <h1>Home Page</h1>
</template>

<!-- About.vue -->
<template>
  <h1>About Page</h1>
</template>

Definire l'array routes

Un array routes mappa i percorsi ai componenti.

import Home from "./views/Home.vue"
import About from "./views/About.vue"

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

createRouter

La funzione createRouter crea un router a partire dalle route e da una modalità di gestione della cronologia.

import { createRouter, createWebHistory } from "vue-router"

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

export default router

createWebHistory

createWebHistory utilizza l'API History di HTML5 per ottenere URL puliti come /about.

Nessun hash nell'URL
Richiede una configurazione del server affinché i deep link funzionino
L'alternativa è createWebHashHistory (/#/about)

Registrare il router

Installare il router nell'app con app.use.

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

createApp(App)
  .use(router)
  .mount("#app")

router-view

Il componente router-view è il punto in cui viene eseguito il rendering del componente associato alla route.

<!-- App.vue -->
<template>
  <nav>...</nav>
  <router-view></router-view>
</template>

<!-- The current page renders here -->

router-link

Utilizzare router-link invece dei normali tag anchor per la navigazione. In questo modo si evitano i ricaricamenti completi della pagina.

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

Stile dei link attivi

router-link aggiunge automaticamente classi CSS al link attivo.

router-link-active per le corrispondenze parziali
router-link-exact-active per le corrispondenze esatte

Applicare uno stile a queste classi per evidenziare la pagina corrente.

Mettere tutto insieme

Il flusso completo:

Definire le route che mappano i percorsi ai componenti
Creare il router con createRouter e createWebHistory
Registrarlo con app.use(router)
Inserire router-view e navigare con router-link

Verifica rapida

Verificare la propria comprensione della configurazione di Vue Router.

Riepilogo: configurare Vue Router

Ha configurato il routing lato client:

Installarlo con npm install vue-router
Definire un array routes
Usare createRouter con createWebHistory
Registrarlo tramite app.use(router)
Utilizzare router-view e router-link

Prossimo argomento: route annidate e dinamiche.

Domande Frequenti

La lezione «Configurazione di Vue Router» è gratuita?

Sì — il testo completo di «Configurazione di Vue Router» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Vue Academy, passa a CoddyKit PRO. Il corso Vue Academy include 3 lezioni in totale.

Cosa imparerò in «Configurazione di Vue Router»?

Installi Vue Router e definisca le prime route. Eserciti Vue Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Vue Academy?

Non è richiesta alcuna esperienza precedente. Vue Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 3.

Quanto tempo richiede la lezione «Configurazione di Vue Router»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Vue Academy?

Sì. Ogni lezione Vue Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a Vue Academy