Phenquestions
Vue.js è un framework javascript reattivo, che viene utilizzato per creare interfacce utente (interfacce utente) e SPA (applicazioni a pagina singola) e gli sviluppatori amano programmare e sentirsi liberi e a proprio agio durante lo sviluppo di applicazioni in Vue.js. Per scopi di routing, Vue.js non fornisce la funzione di routing integrata. Ma esiste una libreria ufficiale di terze parti con il nome di Vue Router per fornire questa funzione this. 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 un Vue esistente.js eseguendo il seguente comando nel terminale
npm install vue-routerDopo un'installazione riuscita, dobbiamo importare VueRouter nel main.js anche nella directory src usando la seguente sintassi
importa Vue da 'vue'importa router da './router'
Vue.uso (router)
Dopo aver importato il router, sei pronto per utilizzare vue-router nel tuo progetto.
Ma se stai installando Vue.js utilizzando Vue CLI. Non avrai bisogno di questo passaggio di installazione aggiuntivo. Puoi aggiungere un plug-in vue-router durante la selezione di un preset.
Utilizzo
L'utilizzo 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 navigazione semplice utilizzando componenti di collegamento al router e forniamo il collegamento utilizzando il prop denominato "to". Il collegamento al router funziona come un tag 'a' di ancoraggio. In realtà è reso come tag 'a' per impostazione predefinita. Nella vista del router, avremo il componente relativo che corrisponde al percorso.
Nel javascript, dobbiamo prima registrare e importare i componenti per definire i loro percorsi. Supponiamo di avere un componente chiamato Comp.vue nella directory delle viste in cui importeremo nell'indice del router.js nella directory del router e definirlo come route.
Per importare un componente, usiamo la seguente dichiarazione
import Comp da "... /views/Comp.vista";Dopo l'importazione, dobbiamo definire il percorso ora e mapparlo sul componente. Come questo,
const rotte = [sentiero: "/",
nome: "Comp",
componente: Comp
];
Possiamo anche fornire più percorsi, separati da una virgola. Come questo,
const rotte = [sentiero: "/",
nome: "Comp",
componente: Comp
,
percorso: "/comp2",
nome: "Comp2",
componente: Comp2
];
Dopo aver definito i percorsi. Passa l'array di route alle istanze del router. Quindi, creiamo anche l'istanza del router
const router = createRouter(rotte // abbreviazione di "rotte: rotte"
);
Alla fine, nel complesso.js file. Dobbiamo creare l'istanza root e montare anche quella e iniettarci le route in modo che l'intera app ne venga a conoscenza.
createApp(App).uso (router)
.mount("#app");
Usando questa tecnica di iniezione. Possiamo accedere al router in qualsiasi componente, utilizzando Questo.$router.
Ora possiamo spingere a livello di codice le rotte con un clic di un pulsante o qualsiasi cosa tu voglia, invece di utilizzare il componente di collegamento al router. Per esempio,
metodi:clickFunc()
Questo.$router.push('/su')
Conclusione e riassunto
In questo articolo, abbiamo imparato a installare Vue Router usando diversi modi e abbiamo imparato a usare il router Vue a livello di codice in javascript e nel Vue.modello di jss. Abbiamo anche imparato a configurare Vue Router in un progetto esistente in una guida molto semplice e dettagliata passo dopo passo. Se vuoi saperne di più su Vue Router, visita Vue Router: Official Docs.
