Jak obsługiwać routing w Vue za pomocą routera Vue

Vue Router, oficjalny router dla Vue, umożliwia tworzenie aplikacji jednostronicowych (SPA) w Vue. Vue Router pozwala mapować komponenty aplikacji internetowej na różne trasy przeglądarki, zarządzać stosem historii aplikacji i konfigurować zaawansowane opcje routingu.

Pierwsze kroki z routerem Vue

Aby rozpocząć pracę z routerem Vue, uruchom następujące polecenie npm (menedżer pakietów węzłów) polecenie w preferowanym katalogu, aby utworzyć aplikację Vue:

npm create vue 

Po wyświetleniu monitu, czy dodać router Vue dla Aplikacja jednostronicowa rozwój, wybierz Tak.

Następnie otwórz projekt w preferowanym edytorze tekstu. Twoja aplikacja źródło katalog powinien zawierać a ruter teczka.

The ruter domy z folderami indeks.js plik zawierający kod JavaScript do obsługi tras w Twojej aplikacji. The indeks.js plik importuje dwie funkcje z pliku vue-router pakiet: utwórz Router I utwórzHistorię sieci.

The utwórz Router

Funkcja tworzy nową konfigurację trasy z obiektu. Ten obiekt zawiera historia I trasy klucze i ich wartości. The trasy key to tablica obiektów szczegółowo opisujących konfigurację każdej trasy, jak widać na powyższym obrazku.

Po skonfigurowaniu tras musisz to wyeksportować ruter instancja i zaimportuj tę instancję do pliku main.js plik:

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

Zaimportowałeś ruter funkcjonować w main.js plik, a następnie sprawił, że aplikacja Vue używa tej funkcji routera z plikiem używać metoda.

Następnie możesz zastosować swoje trasy do aplikacji Vue, tworząc blok kodu podobny do tego poniżej: