Postavite robustan sustav usmjeravanja za svoju Vue aplikaciju pomoću Vue Routera.
Vue Router, službeni usmjerivač za Vue, omogućuje izradu jednostraničkih aplikacija (SPA) u Vueu. Vue Router vam omogućuje mapiranje komponenti vaše web aplikacije na različite rute preglednika, upravljanje hrpom povijesti vaše aplikacije i postavljanje naprednih opcija usmjeravanja.
Početak rada s Vue usmjerivačem
Da biste započeli s Vue Routerom, pokrenite sljedeće npm (Upravitelj paketa čvorova) naredba u vašem željenom direktoriju za izradu vaše Vue aplikacije:
npm create vue
Kada se od vas zatraži treba li dodati Vue Router za Aplikacija na jednoj stranici razvoj, odabir Da.
Zatim otvorite svoj projekt u uređivaču teksta koji preferirate. Vaša aplikacija src imenik treba sadržavati a ruter mapa.
The ruter fascikle kuće an index.js datoteku koja sadrži JavaScript kod za rukovanje rutama u vašoj aplikaciji. The index.js datoteka uvozi dvije funkcije iz vue-usmjerivač paket: createRouter i createWebHistory.
The createRouter funkcija stvara novu konfiguraciju rute iz objekta. Ovaj objekt sadrži povijesti i rute ključeve i njihove vrijednosti. The rute ključ je niz objekata koji detaljno opisuju konfiguraciju svake rute, kao što se vidi na gornjoj slici.
Nakon što konfigurirate svoje rute, ovo trebate izvesti ruter instancu i uvezite ovu instancu u glavni.js datoteka:
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')
Uvezli ste ruter funkcionirati u glavni.js datoteku, a zatim je vaša aplikacija Vue koristila ovu funkciju usmjerivača s koristiti metoda.
Zatim možete primijeniti svoje rute na svoju aplikaciju Vue strukturiranjem sličnog bloka koda onom u nastavku:
