Sådan håndteres routing i Vue med Vue Router

Vue Router, den officielle router for Vue, gør det muligt at bygge Single-Page Applications (SPA'er) i Vue. Vue Router lader dig kortlægge din webapps komponenter til forskellige browserruter, administrere din apps historiestak og opsætte avancerede routingmuligheder.

Kom godt i gang med Vue Router

For at komme i gang med Vue Router skal du køre følgende npm (Node Package Manager) kommando i din foretrukne mappe for at oprette din Vue-applikation:

npm create vue 

Når du bliver bedt om at tilføje Vue Router til Enkeltsideapplikation udvikling, vælg Ja.

Åbn derefter dit projekt i din foretrukne teksteditor. Din app src mappen skal indeholde en router folder.

Det router folder huser en index.js fil, der indeholder JavaScript-koden til håndtering af ruter i din applikation. Det index.js fil importerer to funktioner fra vue-router pakke: oprette Router og oprette WebHistory.

Det oprette Router funktion opretter en ny rutekonfiguration fra et objekt. Dette objekt indeholder

historie og ruter nøgler og deres værdier. Det ruter nøglen er en række objekter, der beskriver hver rutes konfiguration, som det ses på billedet ovenfor.

Når du har konfigureret dine ruter, skal du eksportere denne router instans og importer denne instans 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 importerede router funktion ind i main.js fil og fik derefter din Vue-app til at bruge denne routerfunktion med brug metode.

Du kan derefter anvende dine ruter til din Vue-app ved at strukturere en lignende kodeblok som den nedenfor: