Kako ravnati z usmerjanjem v Vue z Vue Router

Vue Router, uradni usmerjevalnik za Vue, omogoča izdelavo enostranskih aplikacij (SPA) v Vue. Vue Router vam omogoča preslikavo komponent vaše spletne aplikacije v različne poti brskalnika, upravljanje sklada zgodovine vaše aplikacije in nastavitev naprednih možnosti usmerjanja.

Kako začeti z usmerjevalnikom Vue

Če želite začeti uporabljati Vue Router, zaženite naslednje npm (upravitelj paketov vozlišč) ukaz v želenem imeniku, da ustvarite aplikacijo Vue:

npm create vue 

Ob pozivu, ali želite dodati Vue Router za Enostranska aplikacija razvoj, izb ja.

Nato odprite svoj projekt v želenem urejevalniku besedil. Tvoja aplikacija src Imenik mora vsebovati a usmerjevalnik mapo.

The usmerjevalnik mape hiše an index.js datoteka, ki vsebuje kodo JavaScript za upravljanje poti v vaši aplikaciji. The index.js uvozi dve funkciji iz vue-usmerjevalnik paket: createRouter in createWebHistory.

The createRouter ustvari novo konfiguracijo poti iz objekta. Ta predmet vsebuje

zgodovina in poti ključi in njihove vrednosti. The poti ključ je niz predmetov, ki podrobno opisujejo konfiguracijo vsake poti, kot je prikazano na zgornji sliki.

Ko konfigurirate svoje poti, morate to izvoziti usmerjevalnik in uvozite ta primerek v main.js mapa:

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

Uvozili ste usmerjevalnik funkcijo v main.js in nato omogočili, da aplikacija Vue uporablja to funkcijo usmerjevalnika z uporaba metoda.

Nato lahko svoje poti uporabite v svoji aplikaciji Vue tako, da strukturirate podoben kodni blok kot spodnji: