Come gestire il routing in Vue con Vue Router

Vue Router, il router ufficiale di Vue, consente di creare applicazioni a pagina singola (SPA) in Vue. Vue Router ti consente di mappare i componenti della tua app Web su diversi percorsi del browser, gestire lo stack cronologico della tua app e impostare opzioni di routing avanzate.

Guida introduttiva al router Vue

Per iniziare con Vue Router, eseguire quanto segue npm (Gestione pacchetto nodo) comando nella tua directory preferita per creare la tua applicazione Vue:

npm create vue 

Quando viene richiesto se aggiungere Vue Router per Applicazione a pagina singola sviluppo, selezionare SÌ.

Successivamente, apri il tuo progetto nel tuo editor di testo preferito. La tua app src la directory dovrebbe includere a router cartella.

IL router cartella ospita un index.js file contenente il codice JavaScript per la gestione dei percorsi nella tua applicazione. IL index.js file importa due funzioni dal file vue-router pacchetto: createRouter E createWebHistory.

IL createRouter La funzione crea una nuova configurazione di route da un oggetto. Questo oggetto contiene il storia E itinerari chiavi e i loro valori. IL itinerari key è una serie di oggetti che descrivono in dettaglio la configurazione di ciascun percorso, come mostrato nell'immagine sopra.

Dopo aver configurato i tuoi percorsi, devi esportarli router instance e importare questa istanza nel file principale.js file:

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

Hai importato il file router funzione nel principale.js file e quindi ha fatto in modo che l'app Vue utilizzasse questa funzione del router con il file utilizzo metodo.

Puoi quindi applicare i tuoi percorsi alla tua app Vue strutturando un blocco di codice simile a quello qui sotto: