Vue.ROUTER JS

Vue.JS to reaktywna framework JavaScript, który służy do budowania interfejsów użytkowników (interfejsy użytkownika) i spa (aplikacje jedno--strony.JS. Do celów routingu, vue.JS nie zapewnia wbudowanej funkcji routingu. Ale istnieje oficjalna biblioteka stron trzecich o imieniu routera Vue za dostarczenie tej funkcji. Korzystając z tej funkcji, możemy nawigować między stronami internetowymi, ale bez ponownego ładowania. W tym artykule zobaczymy, jak możemy zainstalować i używać routera Vue w Vue.JS.

Instalacja

Możemy zainstalować router vue w istniejącym vue.Projekt JS, uruchamiając następujące polecenie w terminalu

NPM Instaluj vue-router

Po udanej instalacji musimy zaimportować Vuerouter w głównej.plik JS w katalogu SRC również za pomocą następującej składni

importować vue z „vue”
import router z './router '
Vue.Użyj (router)

Po zaimportowaniu routera możesz iść i użyć vue-router w swoim projekcie.

Ale jeśli instalujesz Vue.JS za pomocą vue cli. Nie będziesz potrzebować tego dodatkowego etapu instalacji. Możesz dodać wtyczkę vue-router podczas wybierania ustawień wstępnych.

Stosowanie

Wykorzystanie routeera Vue jest bardzo proste i łatwe w użyciu. Po pierwsze, w szablonie lub HTML

W tym dość prostym i jasnym przykładu vue-router. Stworzyliśmy prostą nawigację za pomocą komponentów routera-link i podajemy link za pomocą rekwizytu o nazwie „to”. Link routera działa tak samo jak tag Anchor „A”. Domyślnie jest ono renderowane jako znacznik „A”. W widoku routera będziemy mieć względny komponent, który pasuje do trasy.

W JavaScript musimy najpierw zarejestrować się i zaimportować komponenty, aby zdefiniować ich trasy. Przypuszczamy, że mamy komponent o nazwie Comp.vue w katalogu Views, do którego zaimportujemy indeks routera.plik JS w katalogu routera i zdefiniuj go jako trasę.

Aby zaimportować komponent, używamy następującej instrukcji

Import Comp z „… /Views /Comp.vue ";

Po imporcie musimy teraz zdefiniować trasę i zmapować ją do komponentu. Lubię to,

const trasy = [

ścieżka: "/",
Nazwa: „Comp”,
Komponent: komp

];

Możemy również podać wiele tras, oddzielone przecinkiem. Lubię to,

const trasy = [

ścieżka: "/",
Nazwa: „Comp”,
Komponent: komp
,

Ścieżka: „/comp2”,
Nazwa: „Comp2”,
Komponent: Comp2

];

Po zdefiniowaniu tras. Przejdź tablicę tras do instancji routera. Więc stwórzmy również instancję routera

const router = Creatter (
trasy // krótkie dla „tras: trasy”
);

Ostatecznie, w głównym.plik JS. Musimy również utworzyć instancję główną i zamontować je również i wstrzykiwać trasy, aby cała aplikacja stała się świadoma tras.

CreateApp (aplikacja)
.Użyj (router)
.Mount („#App”);

Stosując tę ​​technikę wtrysku. Możemy uzyskać dostęp do routera w dowolnym komponencie, używając Ten.ROUTER $.

Możemy teraz programowo naciskać trasy po kliknięciu przycisku lub czegokolwiek, co chcesz, zamiast używać komponentu-link routera. Na przykład,

Metody:
clickfunc ()
Ten.ROUTER $.push ('/about')

Podsumowanie i podsumowanie

W tym artykule nauczyliśmy się instalować router vue przy użyciu różnych sposobów i nauczyliśmy się programowo korzystać z routera vue w JavaScript i w vue.Szablon JS. Nauczyliśmy się również konfigurować router vue w istniejącym projekcie w bardzo łatwym i krok po kroku szczegółowym przewodniku. Jeśli chcesz dowiedzieć się więcej o router vue, uprzejmie odwiedź router vue: oficjalne dokumenty.