Ako zvládnuť smerovanie vo Vue pomocou smerovača Vue

Vue Router, oficiálny smerovač pre Vue, umožňuje vytvárať jednostránkové aplikácie (SPA) vo Vue. Vue Router vám umožňuje namapovať komponenty vašej webovej aplikácie na rôzne trasy prehliadača, spravovať zásobník histórie vašej aplikácie a nastaviť pokročilé možnosti smerovania.

Začíname so smerovačom Vue

Ak chcete začať s Vue Router, spustite nasledujúce npm (Správca balíkov uzlov) príkaz vo vašom preferovanom adresári na vytvorenie vašej aplikácie Vue:

npm create vue 

Keď sa zobrazí výzva, či chcete pridať smerovač Vue pre Jednostránková aplikácia rozvoj, vybrať Áno.

Potom otvorte svoj projekt v preferovanom textovom editore. Vaša aplikácia src adresár by mal obsahovať a router priečinok.

The router skladacie domy an index.js súbor obsahujúci kód JavaScript na spracovanie trás vo vašej aplikácii. The index.js importuje dve funkcie z vue-router balík: createRouter a vytvoriť WebHistory.

The createRouter vytvorí novú konfiguráciu trasy z objektu. Tento objekt obsahuje

histórie a trasy kľúče a ich hodnoty. The trasy kľúč je pole objektov s podrobnosťami o konfigurácii každej trasy, ako je vidieť na obrázku vyššie.

Po nakonfigurovaní trás to musíte exportovať router inštanciu a importujte túto inštanciu do main.js súbor:

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

Importovali ste súbor router funkcie do main.js súbor a potom prinútil vašu aplikáciu Vue používať túto funkciu smerovača s použitie metóda.

Potom môžete použiť svoje trasy vo svojej aplikácii Vue štruktúrovaním podobného bloku kódu, ako je ten nižšie: