Määritä vankka reititysjärjestelmä Vue-sovelluksellesi Vue-reitittimen avulla.

Vue Router, Vuen virallinen reititin, mahdollistaa Single-Page Applications (SPA: n) rakentamisen Vuessa. Vue Routerin avulla voit kartoittaa verkkosovelluksesi komponentit eri selainreiteille, hallita sovelluksesi historiapinoa ja määrittää edistyneitä reititysasetuksia.

Vue-reitittimen käytön aloittaminen

Aloita Vue Routerin käyttö suorittamalla seuraava npm (Node Package Manager) -komento haluamassasi hakemistossa Vue-sovelluksen luomiseksi:

npm create vue

Kun sinulta kysytään, lisätäänkö Vue Router for Yhden sivun sovellus kehitys, valitse Joo.

Avaa seuraavaksi projekti haluamassasi tekstieditorissa. Sovelluksesi src hakemistossa tulee olla a reititin kansio.

The reititin kansiossa on index.js tiedosto, joka sisältää JavaScript-koodin sovelluksesi reittien käsittelyä varten. The index.js tiedosto tuo kaksi funktiota tiedostosta vue-reititin paketti: luo Router ja luo WebHistory.

The luo Router toiminto luo objektista uuden reittikonfiguraation. Tämä objekti sisältää

instagram viewer
historia ja reitit avaimet ja niiden arvot. The reitit avain on joukko objekteja, jotka kuvaavat kunkin reitin kokoonpanoa, kuten yllä olevassa kuvassa näkyy.

Kun olet määrittänyt reitit, sinun on vietävä tämä reititin ilmentymä ja tuo tämä ilmentymä kohteeseen main.js tiedosto:

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

Toit reititin toiminto osaksi main.js tiedosto ja sai sitten Vue-sovelluksesi käyttämään tätä reititintoimintoa käyttää menetelmä.

Voit sitten käyttää reittejäsi Vue-sovelluksessasi jäsentämällä samanlaisen koodilohkon kuin alla: