Kaip tvarkyti maršrutą „Vue“ naudojant „Vue Router“.

„Vue Router“, oficialus „Vue“ maršrutizatorius, leidžia „Vue“ kurti vieno puslapio programas (SPA). „Vue Router“ leidžia susieti žiniatinklio programos komponentus su skirtingais naršyklės maršrutais, valdyti programos istorijos krūvą ir nustatyti išplėstines maršruto parinktis.

Darbo su „Vue Router“ pradžia

Norėdami pradėti naudoti „Vue Router“, atlikite šiuos veiksmus npm (mazgų paketų tvarkyklė) komandą pageidaujamame kataloge, kad sukurtumėte „Vue“ programą:

npm create vue 

Kai būsite paraginti, ar pridėti „Vue Router“, skirtą Vieno puslapio programa plėtra, pasirinkti Taip.

Tada atidarykite projektą pageidaujamoje teksto rengyklėje. Jūsų programa src kataloge turi būti a maršrutizatorius aplanką.

The maršrutizatorius aplanko namai an index.js failą, kuriame yra „JavaScript“ kodas, skirtas maršrutams tvarkyti jūsų programoje. The index.js failas importuoja dvi funkcijas iš vue-router paketas: sukurti maršrutizatorių ir sukurti žiniatinklio istoriją.

The sukurti maršrutizatorių funkcija sukuria naują maršruto konfigūraciją iš objekto. Šiame objekte yra istorija ir maršrutai raktai ir jų reikšmės. The maršrutai raktas yra objektų masyvas, detalizuojantis kiekvieno maršruto konfigūraciją, kaip matyti aukščiau esančiame paveikslėlyje.

Sukonfigūravę maršrutus, turite tai eksportuoti maršrutizatorius egzempliorių ir importuokite šį egzempliorių į main.js failas:

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 importavote maršrutizatorius funkcija į main.js failą ir privertė jūsų „Vue“ programą naudoti šią maršrutizatoriaus funkciją su naudoti metodas.

Tada galite pritaikyti maršrutus savo „Vue“ programoje susistemindami panašų kodo bloką į toliau pateiktą: