Phenquestions
Vue.js to reaktywny framework javascript, który służy do budowania interfejsów użytkownika (interfejsów użytkownika) i SPA (aplikacji jednostronicowych), a programiści uwielbiają kodować i czują swobodę i wygodę podczas tworzenia aplikacji w Vue.js. Do celów routingu Vue.js nie zapewnia wbudowanej funkcji routingu. Istnieje jednak oficjalna biblioteka innej firmy o nazwie Vue Router zapewniająca tę funkcję. Korzystając z tej funkcji, możemy poruszać się 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 zainstaluj vue-routerPo udanej instalacji musimy zaimportować VueRouter w głównym.plik js w katalogu src, a także przy użyciu następującej składni
importuj Vue z „vue”importuj router z './router'
Vue.użyj (router)
Po zaimportowaniu routera możesz zacząć używać vue-router w swoim projekcie.
Ale jeśli instalujesz Vue.js przy użyciu interfejsu wiersza polecenia Vue. Nie będziesz potrzebować tego dodatkowego etapu instalacji. Podczas wybierania ustawienia wstępnego możesz dodać wtyczkę vue-router.
Stosowanie
Korzystanie z vue-routera jest bardzo proste i łatwe w użyciu. Najpierw w szablonie lub HTML
W tym dość prostym i przejrzystym przykładzie vue-router. Stworzyliśmy prostą nawigację za pomocą komponentów router-link i udostępniliśmy łącze za pomocą właściwości o nazwie „do”. Łącze routera działa tak samo jak znacznik kotwicy „a”. W rzeczywistości jest domyślnie renderowany jako znacznik „a”. W widoku routera będziemy mieli względny komponent, który pasuje do trasy.
W javascript najpierw musimy zarejestrować i zaimportować komponenty, aby zdefiniować ich trasy. Przypuszczamy, że mamy komponent o nazwie Comp.vue w katalogu views, do którego zaimportujemy w indeksie routera.js w katalogu routera i zdefiniuj go jako trasę.
Aby zaimportować komponent, używamy następującego oświadczenia
importuj kompozycję z „… /widoki/komp.vue”;Po zaimportowaniu musimy teraz zdefiniować trasę i zmapować ją do komponentu. Lubię to,
stałe trasy = [ścieżka: "/",
nazwa: "komp",
składnik: Comp
];
Możemy też podać wiele tras oddzielonych przecinkiem. Lubię to,
stałe trasy = [ścieżka: "/",
nazwa: "komp",
składnik: Comp
,
ścieżka: "/komp2",
nazwa: "Komp2",
składnik: Comp2
];
Po zdefiniowaniu tras. Przekaż tablicę tras do instancji routera. Stwórzmy więc również instancję routera
const router = createRouter(Routes // skrót od 'routes: route'
);
W końcu w większości.plik js. Musimy stworzyć instancję root i zamontować ją również i wstrzyknąć do niej trasy, aby cała aplikacja była świadoma tras.
utwórzaplikację(aplikacja).użyj (router)
.mount("#aplikacja");
Korzystając z tej techniki wstrzykiwania. Możemy uzyskać dostęp do routera z dowolnego komponentu, używając to.$router.
Możemy teraz programowo przesyłać trasy jednym kliknięciem przycisku lub cokolwiek zechcesz, zamiast używać komponentu router-link. Na przykład,
metody:funkcja kliknięcia()
to.$router.push('/około')
Podsumowanie i podsumowanie
W tym artykule nauczyliśmy się instalować router Vue na różne sposoby i nauczyliśmy się programowo używać routera Vue w javascript i w Vue.szablon js. Nauczyliśmy się również konfigurować router Vue w istniejącym projekcie w bardzo prostym i szczegółowym przewodniku krok po kroku. Jeśli chcesz dowiedzieć się więcej o routerze Vue, odwiedź Vue Router: Official Docs.
