Phenquestions
Vue.js is een reactief javascript-framework dat wordt gebruikt om UI's (gebruikersinterfaces) en SPA's (toepassingen met één pagina) te bouwen en ontwikkelaars houden ervan om te coderen en vrijheid en comfort te voelen tijdens het ontwikkelen van applicaties in Vue.js. Voor routeringsdoeleinden, Vue.js biedt niet de ingebouwde routeringsfunctie. Maar er is een officiële bibliotheek van derden met de naam Vue Router voor het leveren van deze functie. Door deze functie te gebruiken, kunnen we tussen de webpagina's navigeren, maar zonder opnieuw te laden. Dus in dit artikel gaan we kijken hoe we Vue Router in Vue . kunnen installeren en gebruiken.js.
Installatie
We kunnen de Vue-router in een bestaande Vue . installeren.js-project door de volgende opdracht in de terminal uit te voeren:
npm vue-router installerenNa een succesvolle installatie moeten we VueRouter in het hoofd importeren.js-bestand in de src-map ook met behulp van de volgende syntaxis:
importeer Vue van 'vue'importeer router van './router'
Vue.gebruik (router)
Nadat je de router hebt geïmporteerd, ben je klaar om vue-router in je project te gebruiken.
Maar als u Vue . installeert.js met Vue CLI. Je hebt deze extra installatiestap niet nodig. U kunt een vue-router-plug-in toevoegen tijdens het selecteren van een voorinstelling.
Gebruik
Het gebruik van de vue-router is heel eenvoudig en gemakkelijk te gebruiken. Eerst in de sjabloon of HTML
In dit vrij eenvoudige en duidelijke voorbeeld van vue-router. We hebben eenvoudige navigatie gemaakt met behulp van router-link-componenten en bieden de link met behulp van de prop genaamd 'to'. De router-link werkt hetzelfde als een anker 'a' tag. Het wordt standaard weergegeven als een 'a'-tag. In de routerweergave hebben we de relatieve component die overeenkomt met de route.
In het javascript moeten we eerst de componenten registreren en importeren om hun routes te definiëren. We veronderstellen dat we een component hebben met de naam Comp.vue in de map views waarnaar we zullen importeren in de index van de router.js-bestand in de routermap en definieer het als een route.
Om een component te importeren, gebruiken we de volgende verklaring:
importeer Comp van "... /views/Comp.vue";Na het importeren moeten we nu de route definiëren en toewijzen aan de component. Soortgelijk,
const routes = [pad: "/",
naam: "Comp",
onderdeel: Comp
];
We kunnen ook meerdere routes geven, gescheiden door een komma. Soortgelijk,
const routes = [pad: "/",
naam: "Comp",
onderdeel: Comp
,
pad: "/comp2",
naam: "Comp2",
onderdeel: Comp2
];
Na het definiëren van de routes. Routes-array doorgeven aan de routerinstanties. Laten we dus ook de routerinstantie maken
const router = createRouter(routes // kort voor 'routes: routes'
);
Op het einde, in het algemeen.js-bestand. We moeten de root-instantie maken en die ook koppelen en de routes erin injecteren, zodat de hele app zich bewust wordt van de routes.
maakApp(App).gebruik (router)
.mount("#app");
Door deze injectietechniek te gebruiken. We hebben toegang tot de router in elk onderdeel, met behulp van dit.$router.
We kunnen nu programmatisch routes pushen met een klik op een knop of wat je maar wilt, in plaats van de router-link-component te gebruiken. Bijvoorbeeld,
methoden:klikFunc()
dit.$router.duwen('/ongeveer')
Afronding en samenvatting
In dit artikel hebben we geleerd om Vue Router op verschillende manieren te installeren en hebben we geleerd om Vue router programmatisch te gebruiken in javascript en in de Vue.js-sjabloon. We hebben ook geleerd om de Vue Router in een bestaand project in te stellen in een zeer eenvoudige en stapsgewijze gedetailleerde handleiding. Als je meer wilt weten over de Vue Router, ga dan naar Vue Router: Official Docs.
