Vue.js Router

Vue.js är ett reaktivt javascript-ramverk som används för att bygga användargränssnitt (användargränssnitt) och SPA (enkelsidiga applikationer) och utvecklare älskar att koda och känna frihet och komfort medan de utvecklar applikationer i Vue.js. För routingändamål, Vue.js tillhandahåller inte den inbyggda routningsfunktionen. Men det finns ett officiellt tredjepartsbibliotek med namnet Vue Router för att tillhandahålla den här funktionen. Genom att använda den här funktionen kan vi navigera mellan webbsidorna men utan att ladda om. Så i den här artikeln ska vi se hur vi kan installera och använda Vue Router i Vue.js.

Installation

Vi kan installera Vue-routern i en befintlig Vue.js-projekt genom att köra följande kommando i terminalen

npm installera vue-router

Efter en lyckad installation måste vi importera VueRouter i huvudsak.js-filen i src-katalogen med hjälp av följande syntax

importera Vue från 'vue'
importera router från './ router '
Vue.använd (router)

Efter att ha importerat routern är det bra att använda vue-router i ditt projekt.

Men om du installerar Vue.js använder Vue CLI. Du behöver inte detta extra installationssteg. Du kan lägga till ett vue-router-plugin när du väljer en förinställning.

Användande

Användningen av vue-routern är väldigt enkel och lätt att använda. Först i mallen eller HTML

I detta ganska enkla och tydliga exempel på vue-router. Vi har skapat enkel navigering med hjälp av router-länkkomponenter och tillhandahåller länken med hjälp av den prop som heter 'till'. Router-länken fungerar på samma sätt som ett "a" -tagg. Det återges som en a-tagg som standard. I routervyn har vi den relativa komponenten som matchar rutten.

I javaskriptet måste vi först registrera och importera komponenterna för att definiera deras rutter. Vi antar att vi har en komponent som heter Comp.vue i vyer katalogen som vi kommer att importera i routerns index.js-filen i routerkatalogen och definiera den som en rutt.

För att importera en komponent använder vi följande uttalande

importera Comp från "... / vyer / Comp.vue ";

Efter importen måste vi definiera rutten nu och mappa den till komponenten. Så här,

const rutter = [

sökväg: "/",
namn: "Comp",
komponent: Komp

];

Vi kan också ge flera rutter, separerade med ett komma. Så här,

const rutter = [

sökväg: "/",
namn: "Comp",
komponent: Komp
,

sökväg: "/ comp2",
namn: "Comp2",
komponent: Comp2

];

Efter att ha definierat rutterna. Skicka rutterna till routerns instanser. Så, låt oss skapa routerinstansen också

const router = createRouter (
rutter // förkortning för 'rutter: rutter'
);

I slutändan, i huvudsak.js-fil. Vi måste skapa rotinstansen och montera den också och injicera rutterna i den så att hela appen blir medveten om rutterna.

createApp (App)
.använd (router)
.montera ("# app");

Genom att använda denna injektionsteknik. Vi kan komma åt routern i vilken komponent som helst, med detta.$ router.

Vi kan nu programmatiskt trycka på rutter med ett klick på en knapp eller vad du vill, istället för att använda routerlänkkomponenten. Till exempel,

metoder:
clickFunc ()
detta.$ router.tryck ('/ om')

Förpackning och sammanfattning

I den här artikeln har vi lärt oss att installera Vue Router på olika sätt och lärt oss att använda Vue-router programmatiskt i javascript och i Vue.js mall. Vi har också lärt oss att ställa in Vue Router i ett befintligt projekt i en mycket enkel och steg för steg detaljerad guide. Om du vill lära dig mer om Vue Router, vänligen besök Vue Router: Official Docs.