Vue.Router JS

Vue.JS è un framework JavaScript reattivo, che viene utilizzato per costruire UI (interfacce utente) e spa (applicazioni a pagina singola) e gli sviluppatori adorano codificare e sentire la libertà e il comfort durante lo sviluppo di applicazioni in VUE.js. Ai fini del routing, Vue.JS non fornisce la funzione di routing integrata. Ma c'è una biblioteca ufficiale di terze parti con il nome di Vue router per aver fornito questa funzione. Usando questa funzione possiamo navigare tra le pagine Web ma senza ricaricare. Quindi, in questo articolo, vedremo come possiamo installare e utilizzare Vue router in Vue.js.

Installazione

Possiamo installare il router Vue in una Vue esistente.Progetto JS eseguendo il seguente comando nel terminale

NPM Installa Vue-router

Dopo un'installazione riuscita, dobbiamo importare Vuerouter in Main.File JS nella directory SRC anche utilizzando la seguente sintassi

Importa Vue da 'Vue'
router di importazione da './router '
Vue.Usa (router)

Dopo aver importato il router, sei a posto e usa Vue-router nel tuo progetto.

Ma se stai installando Vue.js usando vue cli. Non avrai bisogno di questo passaggio di installazione extra. È possibile aggiungere un plug-in vue-router durante la selezione di un preimpostazione.

Utilizzo

L'uso del Vue-Router è molto semplice e facile da usare. Innanzitutto, nel modello o HTML

In questo esempio piuttosto semplice e chiaro di vue-router. Abbiamo creato una semplice navigazione utilizzando i componenti del link router e fornendo il collegamento utilizzando l'elica denominata "a". Il link del router funziona uguale a un tag di ancoraggio ". In realtà è reso come un tag "un" per impostazione predefinita. Nella vista del router, avremo il componente relativo che corrisponde al percorso.

Nel JavaScript, dobbiamo prima registrarsi e importare i componenti per definire le loro rotte. Supponiamo che abbiamo un componente chiamato comp.Vue nella directory di visualizzazioni a cui importeremo nell'indice del router.File JS nella directory del router e definiscilo come un percorso.

Per importare un componente, utilizziamo la seguente istruzione

Importa comp da "... /viste /comp.vue ";

Dopo l'importazione, dobbiamo definire il percorso ora e mapparlo al componente. Come questo,

percorsi const = [

sentiero: "/",
Nome: "Comp",
Componente: comp

];

Possiamo anche dare più percorsi, separati da una virgola. Come questo,

percorsi const = [

sentiero: "/",
Nome: "Comp",
Componente: comp
,

Path: "/comp2",
Nome: "Comp2",
Componente: comp2

];

Dopo aver definito le rotte. Passa l'array per le istanze del router. Quindi, creiamo anche l'istanza del router

const router = careouter (
rotte // abbreviazione per "rotte: rotte"
);

Alla fine, nel principale.file js. Dobbiamo creare l'istanza di root e montare anche che e iniettare le rotte in esso in modo che l'intera app venga a conoscenza delle rotte.

CreateApp (app)
.Usa (router)
.mount ("#app");

Usando questa tecnica di iniezione. Possiamo accedere al router in qualsiasi componente, usando Questo.$ router.

Ora possiamo spingere a livello di programmazione i percorsi sul clic di un pulsante o tutto ciò che desideri, invece di usare il componente del router-link. Per esempio,

Metodi:
ClickFunc ()
Questo.$ router.push ('/about')

Avvolgimento e riassunto

In questo articolo, abbiamo imparato a installare Vue router usando diversi modi e imparato a usare il router Vue a livello di programmazione in JavaScript e nella Vue.Il modello di JS. Abbiamo anche imparato a impostare il router Vue in un progetto esistente in una guida dettagliata molto semplice e graduale. Se vuoi saperne di più sul router Vue, visita gentilmente Vue router: documenti ufficiali.