0Pricing
Vue Academy · Lezione

Navigazione programmatica e useRouter

Composable router.push(), router.replace(), router.go(), useRouter() e useRoute().

Navigazione programmatica e useRouter è una lezione Vue Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. 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 4 lezioni in totale.

Navigare dal codice

Oltre a RouterLink, spesso è necessario navigare da JavaScript, ad esempio dopo l'invio di un modulo o l'accesso. Il composable useRouter fornisce l'istanza del router necessaria.

Ottenere il router

Richiami useRouter() all'interno di <script setup>. L'oggetto restituito espone push, replace, go e altro ancora.

import { useRouter } from 'vue-router'
const router = useRouter()

Navigare con push

router.push aggiunge una voce alla cronologia, come quando si fa clic su un link. Nella forma più semplice, accetta una stringa di percorso.

router.push('/dashboard')

Push con un oggetto route

Può anche passare un oggetto con name, params e query. Le route denominate evitano di codificare direttamente i percorsi.

router.push({
  name: 'user',
  params: { id: 42 },
  query: { tab: 'profile' }
})

Replace: nessuna voce nella cronologia

router.replace esegue la navigazione senza aggiungere una voce alla cronologia, quindi il pulsante Indietro la salta. Lo utilizzi dopo l'accesso, così gli utenti non possono tornare alla pagina di accesso.

router.replace('/dashboard')

Tornare indietro e andare avanti

router.go(n) si sposta nella cronologia di n passaggi. router.go(-1) torna indietro di una pagina; router.go(1) va avanti.

function goBack() {
  router.go(-1)
}

Dopo un'azione asincrona

Un flusso tipico consiste nell'inviare un modulo, attendere il risultato e poi navigare. push restituisce una Promise che può attendere per verificare il completamento.

async function login() {
  await auth.signIn(form)
  router.push('/dashboard')
}

Leggere la route corrente

Per leggere i parametri e la query della route corrente, utilizzi il composable useRoute. Non lo confonda con useRouter: useRoute è la route, mentre useRouter è il navigatore.

import { useRoute } from 'vue-router'
const route = useRoute()

Accedere ai parametri

Legga i segmenti dinamici tramite route.params. Per una route /user/:id, l'id si trova in route.params.id.

const userId = route.params.id

Accedere alle stringhe di query

Legga la stringa di query tramite route.query. Per ?tab=profile, utilizzi route.query.tab.

const tab = route.query.tab

Reagire ai cambiamenti dei parametri

Poiché route è reattiva, la osservi con watch per reagire quando i parametri cambiano mentre si rimane sullo stesso componente.

import { watch } from 'vue'
watch(() => route.params.id, (newId) => {
  loadUser(newId)
})

Verifica rapida

Verifichi la Sua conoscenza della navigazione programmatica.

Riepilogo

Ha imparato la navigazione programmatica:

  • useRouter() fornisce push, replace e go.
  • push aggiunge una voce alla cronologia; replace non lo fa; go(-1) torna indietro.
  • push accetta una stringa di percorso o un oggetto { name, params, query }.
  • useRoute() legge i parametri e la query correnti ed è reattivo.

Domande Frequenti

La lezione «Navigazione programmatica e useRouter» è gratuita?

Sì — il testo completo di «Navigazione programmatica e useRouter» è 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 4 lezioni in totale.

Cosa imparerò in «Navigazione programmatica e useRouter»?

Composable router.push(), router.replace(), router.go(), useRouter() e useRoute(). 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 4 di 4.

Quanto tempo richiede la lezione «Navigazione programmatica e useRouter»?

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

  1. Campi meta delle route e tipizzazione
  2. Transizioni e animazioni delle route
  3. Configurazione del comportamento di scorrimento
  4. Navigazione programmatica e useRouter
← Torna a Vue Academy