Kuidas käsitleda marsruutimist Vue's Vue ruuteriga

Vue ametlik ruuter Vue ruuter võimaldab Vues luua ühelehelisi rakendusi (SPA-sid). Vue Router võimaldab teil kaardistada oma veebirakenduse komponendid erinevate brauseri marsruutidega, hallata oma rakenduse ajaloo virna ja seadistada täpsemaid marsruutimise valikuid.

Vue ruuteriga alustamine

Vue Routeriga alustamiseks käivitage järgmine npm (sõlme paketihaldur) käsk teie eelistatud kataloogis, et luua oma Vue rakendus:

npm create vue 

Kui küsitakse, kas lisada Vue ruuter Üheleheline rakendus areng, vali Jah.

Järgmisena avage oma projekt eelistatud tekstiredaktoris. Teie rakendus src kataloog peaks sisaldama a ruuter kausta.

The ruuter kaustamajad an index.js faili, mis sisaldab JavaScripti koodi teie rakenduses marsruutide haldamiseks. The index.js fail impordib failist kaks funktsiooni vue-ruuter pakett: loo ruuter ja loo veebiajalugu.

The loo ruuter funktsioon loob objektist uue marsruudi konfiguratsiooni. See objekt sisaldab

ajalugu ja marsruute võtmed ja nende väärtused. The marsruute võti on objektide massiiv, mis kirjeldab üksikasjalikult iga marsruudi konfiguratsiooni, nagu on näha ülaloleval pildil.

Pärast marsruutide konfigureerimist peate selle eksportima ruuter eksemplar ja importige see eksemplari rakendusse main.js fail:

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

Importisite ruuter funktsiooni sisse main.js faili ja seejärel pani teie Vue rakenduse seda ruuteri funktsiooni kasutama koos kasutada meetod.

Seejärel saate oma marsruute oma Vue rakendusele rakendada, struktureerides alloleva koodiplokiga sarnase koodiploki: