Jak zvládnout směrování ve Vue pomocí Vue Router

Vue Router, oficiální router pro Vue, umožňuje ve Vue vytvářet jednostránkové aplikace (SPA). Vue Router vám umožňuje mapovat komponenty vaší webové aplikace na různé trasy prohlížeče, spravovat zásobník historie vaší aplikace a nastavit pokročilé možnosti směrování.

Začínáme s routerem Vue

Chcete-li začít s Vue Routerem, spusťte následující npm (Node Package Manager) příkaz ve vašem preferovaném adresáři k vytvoření vaší aplikace Vue:

npm create vue 

Po zobrazení výzvy, zda chcete přidat Vue Router pro Jednostránková aplikace vývoj, vybrat Ano.

Dále otevřete svůj projekt v preferovaném textovém editoru. Vaše aplikace src adresář by měl obsahovat a router složku.

The router skládací domy an index.js soubor obsahující kód JavaScript pro zpracování tras ve vaší aplikaci. The index.js importuje dvě funkce z vue-router balík: vytvořitRouter a vytvořit WebHistory.

The vytvořitRouter vytvoří novou konfiguraci trasy z objektu. Tento objekt obsahuje

Dějiny a trasy klíče a jejich hodnoty. The trasy key je pole objektů podrobně popisujících konfiguraci každé trasy, jak je vidět na obrázku výše.

Po nakonfigurování tras je potřeba toto exportovat router instance a importujte tuto instanci do main.js soubor:

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 jste router funkce do main.js soubor a poté přiměl vaši aplikaci Vue používat tuto funkci routeru s použití metoda.

Poté můžete své trasy použít ve své aplikaci Vue strukturováním podobného bloku kódu jako je níže: