Przewodnik po routerze Vue

Wprowadzenie

Podczas tworzenia aplikacji internetowych z Vue.js, chyba że tworzysz Aplikacja jednostronicowa (SPA), warto połączyć wiele stron ze stroną docelową, aby umożliwić użytkownikom poruszanie się po nich. Jest to znane jako Routing.

Routing to proces, w którym użytkownik jest przekierowywany do różnych stron w witrynie. Vue.js to framework JavaScript używany do tworzenia aplikacji jednostronicowych, co oznacza, że ​​aplikacja ta jest ładowana tylko raz z serwera do przeglądarki, a przeglądarka nie musi być ponownie ładowana podczas routingu; zamiast tego po prostu żąda tych stron i są one ładowane.

W tym przewodniku dowiemy się, jak robić routing za pomocą Vue.js i zagłębimy się w różne typy routingu, które można wykonać i jak można to zrobić.

Pierwsze kroki

Routing w Vue.js odbywa się za pomocą Vue router, który działa w parze z podstawową biblioteką Vue, aby umożliwić nam skonfigurowanie systemu routingu. Chcielibyśmy skorzystać vue-router w dwóch scenariuszach w naszym projekcie. Chcemy albo użyć routera w istniejącym projekcie, albo dodać go podczas tworzenia nowego projektu.

Skonfiguruj router Vue w istniejącym projekcie

Integracja vue-router do istniejącego projektu może być techniczne i teraz omówimy te szczegóły. Pierwszym krokiem byłoby zainstalowanie pakietu routera vue za pomocą następującego polecenia:

! npm install vue-router@4

Po zainstalowaniu przejdź do src folder i utwórz folder o nazwie router, po którym następuje plik o nazwie index.js router folder, który będzie służył jako plik konfiguracyjny naszego routera. Nasz src katalog będzie teraz wyglądał tak:

W index.js pliku, upewnijmy się, że wklejamy poniższy kod, który jest kodem konfiguracji routera:

import { createRouter, createWebHashHistory } from 'vue-router'
import HomePage from '../views/HomePage.vue' const routes = [ { path: '/', name: 'home', component: HomePage },
] const router = createRouter({ history: createWebHashHistory(), routes
})
export default router

Mamy routes tablica zawierająca pojedynczy obiekt, który może być wieloma obiektami, gdzie każdy obiekt reprezentuje pojedynczą trasę. Na razie stworzyliśmy tylko ten, który przekierowuje do komponentu strony głównej.

Każdy z tych routes obiekty zazwyczaj składają się z path, który jest ścieżką url względem katalogu głównego witryny, the name, który służy jako identyfikator, a component, który zaimportowaliśmy na górze strony.

Oprócz tablicy tras konfigurujemy instancję routera na dole, tworząc a createRouter() funkcja i przekazywanie w history kluczowe wartości i routes tablicę, a następnie eksportujemy router na przykład do użytku w naszej aplikacji.

Aby użyć tej konfiguracji routera w naszej aplikacji, otwórz main.js Plik w src teczka, import router from "./router", a następnie dodaj .use(router) pomiędzy createApp(App) i .mount('#app') tak jak poniżej:

import router from './router' createApp(App).use(router).mount('#app')

To zdjęcie vue-router został skonfigurowany globalnie w naszej aplikacji, a następnym krokiem jest użycie go w naszej aplikacji. Można to łatwo osiągnąć, dołączając <router-view /> w ciągu App.js znacznik szablonu, który renderuje tylko pasującą trasę:

<!--App.vue -->
<template>
<!-- Any code placed here is going to be fixed -->
<!-- This will only show the page that matches the selected route --> <router-view /> <!-- Any code placed here is going to be fixed -->
</template> <script> export default { name: 'App', }
</script>

Konfigurowanie tras w Vue.js

Trasy są zwykle tworzone w router/index.js tablica tras pliku, a te trasy łączą się z komponentami. Dobrą praktyką jest utworzenie folderu widoków, w którym będą przechowywane wszystkie widoki stron. Na przykład:

W tym momencie wiemy już, jak ręcznie ustawić trasy.

Zainstaluj router Vue za pomocą interfejsu wiersza polecenia Vue

Jeśli mamy zamiar stworzyć nowy projekt i wierzymy, że skorzystamy z vue-router, łatwiej to zrobić podczas tworzenia projektu.

Wszystko, co musimy zrobić, to użyć Vue CLI, aby zainstalować najnowszą wersję vue-router przy ręcznym doborze cech w procesie tworzenia naszego projektu:

Przeczytaj i dowiedz się więcej o tworzeniu projektu Vue.js za pośrednictwem naszego Przewodnik po Vue CLI!

Leniwe ładowanie tras za pomocą routera Vue

Wraz ze wzrostem rozmiaru naszej aplikacji rośnie rozmiar pakietu, co powoduje, że ładowanie naszej witryny trwa dłużej. Możemy użyć vue-router zaimplementować leniwe ładowanie, aby uniknąć ładowania niektórych określonych tras, dopóki użytkownik ich nie zażąda.

Zwykle wykonuje się to w pliku konfiguracyjnym routera, usuwając import na górze i zastępując ją dynamiczną instrukcją import w opcji component naszej trasy:

import { createRouter, createWebHashHistory } from 'vue-router';
const routes = [ { path: '/', name: 'home', component: () => import(/* webpackChunkName: "home" */ '../views/HomePage.vue'), }, { path: '/about', name: 'about', component: () => import(/* webpackChunkName: "about" */ '../views/AboutPage.vue'), },
];
const router = createRouter({ history: createWebHashHistory(), routes,
});
export default router;

Nawigacja między trasami z

Do tej pory byliśmy w stanie tworzyć trasy, ale jak nawigować w naszej aplikacji? Używamy <router-link> tag zamiast <a> element HTML do obsługi routingu.

Na przykład, jeśli chcemy utworzyć pasek nawigacyjny u góry naszej aplikacji, możemy to zrobić w App.js plik powyżej <router-view/> tag, aby wyświetlał się na wszystkich trasach:

<nav> <router-link to="/">Home</router-link> | <router-link to="/about">About</router-link>
</nav>

Łącze routera akceptuje to='path' atrybut, który przenosi użytkownika do ścieżki komponentu ustawionej podczas konfigurowania trasy. Działa to jak href='path``' atrybut w HTML.

Korzystanie z nazwanych tras

Korzystanie z nazwanych tras pozwala nam przejść w name klucz, który ma dostęp do name właściwość, którą ustawiamy podczas konfigurowania tras zamiast korzystać ze ścieżki, wiążąc dane w ten sposób:

<router-link :to="{ name: 'About' }">About</router-link>

Jedną z zalet korzystania z tej metody jest to, że w przypadku, gdy zdecydujemy się zmienić ścieżkę trasy dla naszych dużych aplikacji, nie musimy zaczynać zmieniać ścieżki wszystkich łączy, co mogłoby być uciążliwe.

Routing dynamiczny

Mogą pojawić się sytuacje, w których konieczne będzie użycie routingu dynamicznego, aby uniknąć niepotrzebnego powtarzania stron. Załóżmy na przykład, że mamy listę owoców i chcemy, aby użytkownik mógł kliknąć konkretny owoc, a na stronie ze szczegółowymi informacjami o owocach wyświetlane są tylko szczegóły dotyczące tego owocu. W tym przypadku korzystamy z routingu dynamicznego.

Mielibyśmy dwie strony – jedną, aby pokazać owoce na liście, a drugą, aby pokazać szczegóły każdego owocu, która jest stroną „planu”, która zostanie wypełniona szczegółami owocu. Utworzymy strony w folderze Vue, a następnie dodamy trasy do routes szyk:

import FruitsPage from '../views/FruitsPage.vue';
import FruitDetails from '../views/FruitDetails.vue'; const routes = [ { path: '/fruits', name: 'Fruits', component: FruitsPage, }, { path: '/fruits/:id', name: 'FruitDetails', component: FruitDetails, },
];

Zauważymy, że dla FruitDetails strona, dodaliśmy dynamiczną id nieruchomość, aby uzyskać id i używa go do zapytania o konkretne dane, które są wyświetlane na tej stronie za pomocą $route.params w naszym szablonie, dzięki czemu trasa jest dynamiczna.

W FruitsPage, załóżmy, że mamy tablicę owoców, które zapętlamy w naszej aplikacji, możemy otoczyć każdy owoc linkiem obok parametrów w ten sposób:

<!-- FruitsPage.vue --> <template> <h1>Fruits page</h1> <div :key="fruit.id" v-for="fruit in fruits"> // dynamic linking by attaching the id as params <router-link :to="{ name: 'FruitDetails', params: { id: fruit.id } }"> <h3>{{ fruit.name }}</h3> </router-link> </div>
</template> <script> export default { data() { return { fruits: [ { id: 1, name: 'Apple', description: "Apples are an incredibly nutritious fruit.", }, { id: 2, name: 'Mango', description: 'A mango is an edible stone fruit produced by the tropical.', }, { id: 3, name: 'Banana', description: 'A banana is an elongated, edible fruit of the genus Musa.', }, ], }; }, };
</script>

W tym momencie, gdy użytkownik kliknie każdy owoc, przeniesie go do FruitDetails strona, na której możemy uzyskać dostęp do id i użyj go do określenia, które szczegóły owocu powinny być pokazane w FruitDetails strona.

Uzyskaj dostęp do parametrów trasy

Do tej pory widzieliśmy, jak dynamicznie przekazywać parametry do określonej strony, zobaczmy teraz, jak możemy uzyskać dostęp do tego parametru w naszym FruitDetails strona. Istnieją dwa sposoby uzyskania dostępu do parametrów w Vue – poprzez $route.params lub korzystając z rekwizytów:

Korzystanie z $trasa.parametry

Parametry są bezpośrednio dostępne poprzez $route.params:

<template> <h1>Fruit Details</h1> <p>This is fruit with the id of {{ $route.params.id }}</p>
</template>

Lub możemy uzyskać do niego dostęp w naszym data() metoda przy użyciu this:

<template> <h1>Fruit Details</h1> <p>This is fruit with the id of {{ id }}</p>
</template> <script> export default { data() { return { id: this.$route.params.id, }; }, };
</script>

Korzystanie z rekwizytów Vue

Inną łatwą metodą dynamicznego dostępu do danych za pośrednictwem tras jest użycie rekwizytów. Najpierw musimy ustawić props do true w obiekcie konfiguracji tras:

{ path: '/fruits/:id', name: 'FruitDetails', component: FruitDetails, props: true,
},

W ten sposób wszystko, co musimy zrobić, to dodać props opcja do script tag, a następnie skorzystaj z rekwizytów w naszym template etykietka:

<template> <h1>Fruit Details</h1> <p>This is fruit with the id of {{ id }}</p>
</template> <script> export default { props: ['id'], };
</script>

Błędy 404 – Nie znaleziono trasy

W przypadku, gdy użytkownik nawiguje do nieistniejącej trasy, Vue załaduje stronę, ale bez żadnych komponentów, tworząc pustą stronę. W takim przypadku najlepszą rzeczą do zrobienia jest wyświetlenie strony 404 z być może przyciskiem prowadzącym do strony głównej lub w inne miejsce, które naszym zdaniem chcieliby przejść.

Można to łatwo obsłużyć, tworząc komponent dla naszej strony 404, a następnie dodając trasę 404 do tablicy routingu w pliku konfiguracyjnym routera, ale tym razem użyjemy wyrażenia regularnego, aby przechwycić wszystkie trasy, które nie zostały wcześniej zadeklarowane:

{ path: '/:catchAll(.*)', name: 'ErrorPage', component: ErrorPage,
}

Połączenia :catchAll to segment dynamiczny, który otrzymuje wyrażenie regularne (.*) w którym Vue Router sprawdza, czy trasa, do której kieruje się użytkownik, jest zdefiniowana w pliku konfiguracyjnym naszego routera. Jeśli takie trasy nie istnieją, użytkownik jest kierowany do komponentu, którym w naszym przypadku jest ErrorPage składnik:

<template> <h2>404 Page</h2> <p>This is a 404 page</p> <p>Visit home page <router-link to="/">here</router-link></p>
</template>

Przekierowania

W sytuacji, gdy chcemy, aby użytkownicy byli przekierowywani, gdy odwiedzają konkretną trasę, na przykład gdy mieliśmy poprzednią trasę, z której już nie korzystamy, chcemy, aby użytkownicy byli przekierowywani na nową, gdy odwiedzają tę trasę. Można to łatwo osiągnąć, dodając nowy obiekt do naszej tablicy konfiguracyjnej tras z redirect pole:

{ path: '/fruits', name: 'Fruits', component: FruitsPage,
},
{ path: '/all-frults', redirect: '/fruits',
},

Wszystko, co robi powyższy kod, polega na tym, że jeśli użytkownik odwiedzi, ścieżka /all-fruits, przekieruje ich do /fruits trasa.

Nawigacja programowa

Do tej pory dużo się nauczyliśmy o routingu, ale jest jeszcze jedna rzecz, którą warto wiedzieć: jak przeprowadzić nawigację programową. Programową nawigację definiujemy jako sytuację, w której użytkownik jest przekierowywany/kierowany na podstawie określonej akcji, która ma miejsce na trasie, takiej jak logowanie lub rejestracja, lub poprzez kliknięcie określonego przycisku, takiego jak przycisk „wróć”.

Historia routera

Możemy korzystać z historii przeglądarki, aby łatwo nawigować wstecz lub do przodu, w zależności od naszych preferencji. Jeśli pamiętasz, mamy createRouter() funkcja w pliku konfiguracyjnym routera, gdzie ustawiamy a history wartość, umożliwiając routerowi Vue śledzenie historii naszego routera, gdy kierujemy się przez aplikację internetową.

Dzięki temu możemy przemierzać historię przeglądarki, na podstawie warunkowego, takiego jak kliknięcie przycisku:

<template> <h1>Fruit Details</h1> <p>This is fruit with the id of {{ id }}</p> <button @click="goBack">Go Back</button>
</template> <script> export default { props: ['id'], methods:{ goBack(){ this.$router.go(-1) } } };
</script>

Możemy również zdecydować się na pójście do przodu, używając 1 zamiast -1 i załóżmy, że chcemy przejść o 2 kroki, których możemy użyć 2 or -2.

Naciskać

push() jest zwykle używany po wykonaniu akcji i dodaje nowy wpis do stosu historii. Na przykład, jeśli użytkownik zaloguje się pomyślnie, chcielibyśmy programowo przejść do strony pulpitu nawigacyjnego. Odbywa się to poprzez dołączenie metody push obok nazwy trasy:

this.$router.push({ name: 'Dashboard' });

Wnioski

Routing to jedna z podstawowych funkcji Vue. Chyba że budujesz Aplikacja jednostronicowa (SPA), warto połączyć wiele stron ze stroną docelową, aby umożliwić użytkownikom poruszanie się po nich.

W tym przewodniku przyjrzeliśmy się, czym jest routing, jak zainstalować vue-router w nowych i istniejących projektach, jak wykonywać lazy loading, nawigować między trasami, wykonywać dynamiczne wyznaczanie tras, uzyskiwać dostęp do parametrów tras i wykonywać programową nawigację.

• Coinsmart. Najlepsza w Europie giełda bitcoinów i kryptowalut.
• Platoblockchain. Web3 Inteligencja Metaverse. Wzmocniona wiedza. DARMOWY DOSTĘP.
• CryptoJastrząb. Radar Altcoin. Bezpłatna wersja próbna.
• Źródło: https://stackabuse.com/guide-to-vue-router/