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.
Spis treści:
Pierwsze kroki z routerem Vue
Aby rozpocząć pracę z Vue Router, uruchom następujące polecenie npm (Node Package Manager) w preferowanym katalogu, aby utworzyć aplikację Vue:
npm create vue
Po wyświetleniu monitu, czy dodać router Vue do tworzenia aplikacji jednostronicowych, wybierz opcję Tak.
Następnie otwórz projekt w preferowanym edytorze tekstu. Katalog src Twojej aplikacji powinien zawierać folder routera.
W folderze routera znajduje się plik index.js zawierający kod JavaScript do obsługi tras w Twojej aplikacji. Plik index.js importuje dwie funkcje z pakietu vue-router: createRouter i createWebHistory.
Funkcja createRouter tworzy nową konfigurację trasy z obiektu. Ten obiekt zawiera klucze historii i tras oraz ich wartości. Klucz tras to tablica obiektów szczegółowo opisujących konfigurację każdej trasy, jak widać na powyższym obrazku.
Po skonfigurowaniu tras musisz wyeksportować tę instancję routera i zaimportować tę instancję do pliku main.js:
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ś funkcję routera do pliku main.js, a następnie sprawiłeś, że aplikacja Vue używa tej funkcji routera za pomocą metody use.
Następnie możesz zastosować swoje trasy do aplikacji Vue, tworząc blok kodu podobny do tego poniżej:
<script setup>
import { RouterLink, RouterView } from 'vue-router'
</script><template>
<header>
<nav>
<RouterLink to="https://www.makeuseof.com/">Home</RouterLink>
<RouterLink to="/about">About</RouterLink>
</nav>
</header><RouterView />
</template>
Powyższy blok kodu demonstruje użycie routera Vue w komponencie Vue. Fragment kodu importuje dwa komponenty z biblioteki vue-router: RouterLink i RouterView.
Komponenty RouterLink tworzą łącza do stron Home i About w powyższym fragmencie kodu. Atrybut do określa ścieżkę do trasy, którą nawigujesz po kliknięciu łącza. Tutaj masz jedno łącze wskazujące na trasę główną („/”) i drugie łącze wskazujące na trasę „/ about”.
Komponent renderuje komponent powiązany z bieżącą trasą. Działa jako symbol zastępczy, w którym będzie renderowana zawartość bieżącej trasy. Gdy nawigujesz do innej trasy, komponent powiązany z tą trasą będzie renderowany wewnątrz komponentu.
Dodawanie parametrów do tras Twojej aplikacji
Vue Router umożliwia przekazywanie parametrów i zapytań do tras. Parametry to dynamiczne części adresu URL, oznaczone dwukropkiem „:”.
Aby ustawić router Vue tak, aby mógł przechwytywać parametry w trasach aplikacji, skonfiguruj określoną trasę w pliku index.js:
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: "https://www.makeuseof.com/",
name: "home",
component: HomeView,
},
{
path: "/developer/:profileNumber",
name: "developer",
component: () => import("../views/devView.vue"),
},
],
});
Powyższy blok kodu przedstawia instancję routera z dwiema trasami: domową i programistyczną. Ścieżka programisty pokazuje informacje o konkretnym deweloperze na podstawie numeru jego profilu.
Teraz zmodyfikuj plik App.vue, aby wyglądał jak fragment kodu poniżej:
<script setup>
import { ref } from "vue";
import { RouterLink, RouterView } from "vue-router";const developer = ref([
{
name: "Chinedu",
profile: 2110,
},
]);
</script><template>
<header>
<nav>
<RouterLink to="https://www.makeuseof.com/">Home</RouterLink>
<RouterLink :to="{ path: `/developer/${developer.profile}` }">
Dev Profile
</RouterLink>
</nav>
</header><RouterView />
</template>
Powyższy blok kodu ustawia zmienną programisty jako obiekt reaktywny z dwiema właściwościami: nazwą i profilem. Następnie drugi komponent RouterLink kieruje do komponentu devView. Możesz teraz uzyskać dostęp do wartości parametru, który przekazujesz do adresu URL w bloku szablonu lub bloku JavaScript komponentu devView.
Aby uzyskać dostęp do tej wartości w bloku szablonów komponentu devView, Vue udostępnia metodę $route, obiekt zawierający właściwości szczegółowo określające informacje o adresie URL. Te informacje obejmują fullPath, zapytania, parametry i składniki.
Oto przykład, jak uzyskać dostęp do profilu konkretnego programisty w komponencie devView za pomocą metody $route:
<template>
<div>
<h1>This is developer {{ $route.params.profileNumber }} about page</h1>
</div>
</template>
Powyższy fragment kodu pokazuje, jak używać metody $route do uzyskiwania dostępu i wyświetlania wartości parametru profileNumber w szablonie komponentu.
Właściwość params w metodzie $route zawiera parametry zdefiniowane w trasie. Kiedy Vue renderuje ten komponent, zastępuje wartość $route.params.profileNumber rzeczywistą wartością, którą przekazujesz w adresie URL.
Na przykład, jeśli odwiedzisz /developer/123, wyświetlony komunikat to „To jest programista 123 o stronie”.
Możesz również uzyskać dostęp do informacji o trasie w bloku JavaScript swojego komponentu. Na przykład:
<script setup>
import { useRoute } from "vue-router";const route = useRoute();
</script><template>
<div>
<h1>This is developer {{ route.params.profileNumber }} about page</h1>
</div>
</template>
W poprzednim bloku kodu uzyskałeś dostęp do obiektu $route bezpośrednio w szablonie, aby pobrać parametry trasy. Jednak w zaktualizowanym bloku kodu zaimportowałeś funkcję useRoute() z pakietu vue-router. Przypisałeś funkcję do zmiennej, której następnie użyłeś w szablonie swojego komponentu Vue.
Za pomocą useRoute() postępujesz zgodnie z podejściem API kompozycji Vue 3, wykorzystując system reaktywności. Zapewnia to automatyczną aktualizację komponentu po zmianie parametrów trasy.
Dodawanie zapytań do tras Twojej aplikacji
Zapytania lub ciągi zapytań to opcjonalne parametry dodawane do adresu URL po znaku zapytania „?”. Na przykład w trasie „/search?name=vue” „name=vue” to ciąg zapytania, gdzie nazwa to klucz, a vue to wartość.
Aby dodać zapytanie do trasy w Vue Router, możesz użyć właściwości query obiektu to w komponencie RouterLink. Właściwość zapytania powinna być obiektem, w którym każda para klucz-wartość reprezentuje parametr zapytania. Oto przykład:
<RouterLink :to="{ name: 'home', query: {name: 'vue'}}">Home</RouterLink>
Po dodaniu zapytania do trasy możesz uzyskać dostęp do parametrów zapytania w swoich komponentach Vue. Można to zrobić za pomocą obiektu $route lub funkcji useRoute, podobnie jak w przypadku dodawania parametrów trasy.
Oto przykład użycia parametru zapytania w komponencie:
<template>
{{ $route.query.name }}
</template>
Ten fragment kodu pokazuje, jak uzyskać dostęp do wartości parametru zapytania (nazwy) z adresu URL i renderować ją za pomocą obiektu $route.query w szablonie komponentu Vue.js.
Definiowanie strony rezerwowej (404).
Vue Router umożliwia zdefiniowanie trasy awaryjnej, która zostanie dopasowana, gdy żadne inne trasy nie będą pasować do adresu URL. Jest to przydatne do wyświetlania strony „404 Not Found”.
Oto jak możesz zdefiniować trasę awaryjną za pomocą routera Vue:
{
path:'/:pathName(.*)',
name: 'NotFound',
component: () => import('../views/NotFoundView.vue')
}
Część /:nazwaścieżki wskazuje segment dynamiczny w adresie URL, a (.*) to wyrażenie regularne JavaScript, które dopasowuje dowolne znaki po segmencie dynamicznym. Pozwala to na dopasowanie trasy do dowolnej ścieżki.
Gdy użytkownik przejdzie do adresu URL, który nie pasuje do żadnej innej trasy, Vue wyrenderuje komponent NotFoundView. Takie podejście służy do obsługi błędów 404 lub wyświetlania strony rezerwowej, gdy żądana trasa nie zostanie znaleziona.
Naucz się tworzyć animacje w Vue
Wiesz już, jak dodawać parametry i zapytania do tras aplikacji. Nauczyłeś się również, jak zdefiniować stronę zastępczą do obsługi błędów 404. Vue Router zapewnia znacznie więcej funkcji, takich jak ustawianie tras dynamicznych i zagnieżdżonych.
Dodanie animacji i przejść między elementami na stronie internetowej może znacznie poprawić wrażenia użytkownika. Musisz nauczyć się tworzyć przejścia i animacje w Vue, aby stworzyć płynniejszą, bardziej wciągającą i ogólnie lepszą stronę internetową.