Kā rīkoties ar maršrutēšanu Vue, izmantojot Vue maršrutētāju

Vue Router, oficiālais Vue maršrutētājs, ļauj Vue izveidot vienas lapas lietojumprogrammas (Single-Page Applications — SPA). Izmantojot Vue Router, varat kartēt tīmekļa lietotnes komponentus dažādos pārlūkprogrammas maršrutos, pārvaldīt lietotnes vēstures kopu un iestatīt papildu maršrutēšanas opcijas.

Darba sākšana ar Vue maršrutētāju

Lai sāktu darbu ar Vue Router, izpildiet tālāk norādīto npm (mezglu pakotņu pārvaldnieks) komandu vēlamajā direktorijā, lai izveidotu savu Vue lietojumprogrammu:

npm create vue 

Kad tiek prasīts, vai pievienot Vue Router for Vienas lapas lietojumprogramma izstrāde, atlase Jā.

Pēc tam atveriet savu projektu vēlamajā teksta redaktorā. Jūsu lietotne src direktorijā jāiekļauj a maršrutētājs mapi.

The maršrutētājs mapju mājas an index.js failu, kurā ir JavaScript kods maršrutu apstrādei jūsu lietojumprogrammā. The index.js fails importē divas funkcijas no vue-maršrutētājs iepakojums: izveidot maršrutētāju un izveidot WebHistory.

The izveidot maršrutētāju funkcija izveido jaunu maršruta konfigurāciju no objekta. Šis objekts satur vēsture un maršrutos atslēgas un to vērtības. The maršrutos atslēga ir objektu masīvs, kurā ir detalizēti aprakstīta katra maršruta konfigurācija, kā redzams iepriekš attēlā.

Pēc maršrutu konfigurēšanas tas ir jāeksportē maršrutētājs instancē un importējiet šo gadījumu uz galvenais.js fails:

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

Jūs importējāt maršrutētājs funkciju galvenais.js failu un pēc tam lika jūsu Vue lietotnei izmantot šo maršrutētāja funkciju ar izmantot metodi.

Pēc tam varat lietot savus maršrutus savai Vue lietotnei, strukturējot līdzīgu koda bloku tālāk norādītajam.