Hvordan håndtere ruting i Vue med Vue Router

Vue Router, den offisielle ruteren for Vue, gjør det mulig å bygge Single-Page Applications (SPA-er) i Vue. Vue Router lar deg kartlegge nettappens komponenter til forskjellige nettleserruter, administrere appens historiestabel og sette opp avanserte rutingalternativer.

Komme i gang med Vue-ruteren

For å komme i gang med Vue Router, kjør følgende npm (Node Package Manager) kommando i din foretrukne katalog for å lage Vue-applikasjonen din:

npm create vue 

Når du blir bedt om å legge til Vue Router for Enkeltsideapplikasjon utvikling, velg Ja.

Deretter åpner du prosjektet i ditt foretrukne tekstredigeringsprogram. Appen din src katalogen skal inneholde en ruter mappe.

De ruter mappe huser en index.js fil som inneholder JavaScript-koden for håndtering av ruter i applikasjonen din. De index.js filen importerer to funksjoner fra vue-ruter pakke: opprette ruter og lage WebHistory.

De opprette ruter funksjonen oppretter en ny rutekonfigurasjon fra et objekt. Dette objektet inneholder

historie og ruter nøkler og deres verdier. De ruter nøkkel er en rekke objekter som beskriver hver rutes konfigurasjon, som vist i bildet ovenfor.

Etter å ha konfigurert rutene dine, må du eksportere denne ruter forekomst og importer denne forekomsten til main.js fil:

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')

Du importerte ruter funksjon inn i main.js fil og fikk deretter Vue-appen din til å bruke denne ruterfunksjonen med bruk metode.

Du kan deretter bruke rutene dine til Vue-appen din ved å strukturere en lignende kodeblokk som den nedenfor: