Guida alla data intelligence PlatoBlockchain del router Vue. Ricerca verticale. Ai.

Guida al router Vue


Introduzione

Durante lo sviluppo di applicazioni Web con Vue.js, a meno che tu non stia creando un file Applicazione a pagina singola (SPA), ti consigliamo di collegare più pagine a una pagina di destinazione per consentire agli utenti di navigare attraverso di esse. Questo è noto come instradamento.

Il routing è il processo mediante il quale un utente viene indirizzato a diverse pagine di un sito Web. Vue.js è un framework JavaScript utilizzato per creare app a pagina singola, il che significa che questa applicazione viene caricata solo una volta dal server al browser e il browser non ha bisogno di essere ricaricato durante il routing; invece, richiede semplicemente queste pagine e vengono caricate.

In questa guida impareremo come eseguire il routing con Vue.js e approfondiremo i vari tipi di routing che possono essere eseguiti e come possono essere eseguiti.

Iniziamo

Il routing in Vue.js è terminato Vue Router, che funziona in tandem con la libreria Vue di base per consentirci di impostare un sistema di routing. Vorremmo usare vue-router in due scenari del nostro progetto. Vogliamo utilizzare il router in un progetto esistente o aggiungerlo durante la creazione di un nuovo progetto.

Imposta il router Vue nel progetto esistente

Integrazione vue-router in un progetto esistente può essere tecnico e esamineremo ora questi dettagli. Il primo passo sarebbe installare il pacchetto vue router usando il seguente comando:

! npm install vue-router@4

Una volta installato, vai a src cartella e creare una cartella chiamata router, seguito da un file chiamato index.js nel router cartella, che fungerà da file di configurazione del router. Nostro src la directory ora apparirà così:

installazione del router vue

Nel index.js file, assicuriamoci di incollare il codice seguente, che è il codice di configurazione del router:

import { createRouter, createWebHashHistory } from 'vue-router'
import HomePage from '../views/HomePage.vue' const routes = [ { path: '/', name: 'home', component: HomePage },
] const router = createRouter({ history: createWebHashHistory(), routes
})
export default router

Noi abbiamo un routes array che contiene un singolo oggetto, che potrebbe essere più oggetti in cui ogni oggetto rappresenta un singolo percorso. Per il momento, abbiamo creato solo quello che reindirizza al componente della home page.

Ognuno di questi routes oggetti è tipicamente composto da path, che è il percorso dell'URL relativo alla radice del sito, il name, che funge da identificatore, e il component, che abbiamo importato nella parte superiore della pagina.

A parte l'array di route, impostiamo l'istanza del router in basso creando un file a createRouter() funzione e passando il history valori chiave e il routes array, quindi esportiamo il file router esempio per l'uso all'interno della nostra applicazione.

Per utilizzare questa configurazione del router all'interno della nostra applicazione, apri il file main.js file nella src cartella, import router from "./router"e quindi aggiungi .use(router) fra createApp(App) ed .mount('#app') proprio come è qui sotto:

import router from './router' createApp(App).use(router).mount('#app')

La sezione vue-router è stato configurato a livello globale all'interno della nostra applicazione e il passaggio successivo consiste nell'utilizzarlo all'interno della nostra applicazione. Questo è facilmente realizzabile includendo <router-view /> all'interno App.js tag template, che rende solo il percorso abbinato:

<!--App.vue -->
<template>
<!-- Any code placed here is going to be fixed -->
<!-- This will only show the page that matches the selected route --> <router-view /> <!-- Any code placed here is going to be fixed -->
</template> <script> export default { name: 'App', }
</script>
Configurazione di percorsi in Vue.js

I percorsi sono generalmente creati nel router/index.js array di percorsi del file e questi percorsi si connettono ai componenti. È buona norma creare una cartella delle visualizzazioni in cui verranno archiviate tutte le visualizzazioni di pagina. Per esempio:

impostare percorsi in vue

A questo punto ora sappiamo come impostare i percorsi manualmente.

Nota: Tutto questo sarà fatto per noi se utilizziamo il vue-cli installare vue-router durante la creazione del nostro progetto.

Installa Vue Router con Vue CLI

Se stiamo per creare un nuovo progetto e crediamo che ne faremo uso vue-router, è più facile farlo durante la creazione del progetto.

Tutto quello che dobbiamo fare è usare Vue CLI per installare la versione più recente di vue-router mentre selezioniamo manualmente le caratteristiche nel processo di creazione del nostro progetto:

vue cli configurazione del router vue

Leggi e scopri di più sulla creazione del progetto Vue.js tramite il nostro Guida alla Vue CLI!

Percorsi di caricamento pigri con Vue Router

Con l'aumento delle dimensioni della nostra applicazione, la dimensione del pacchetto aumenta, facendo sì che il nostro sito richieda più tempo per il caricamento. Possiamo usare vue-router per implementare il caricamento lento per evitare di caricare alcuni percorsi specifici fino a quando l'utente non li richiede specificamente.

Questa operazione viene in genere eseguita nel file di configurazione del router rimuovendo il file import istruzione in alto e sostituendola con una dichiarazione di importazione dinamica nell'opzione componente del nostro percorso:

import { createRouter, createWebHashHistory } from 'vue-router';
const routes = [ { path: '/', name: 'home', component: () => import(/* webpackChunkName: "home" */ '../views/HomePage.vue'), }, { path: '/about', name: 'about', component: () => import(/* webpackChunkName: "about" */ '../views/AboutPage.vue'), },
];
const router = createRouter({ history: createWebHashHistory(), routes,
});
export default router;

Finora siamo stati in grado di creare percorsi, ma come navighiamo all'interno della nostra applicazione? Noi usiamo il <router-link> tag al posto di <a> elemento in HTML per gestire il routing.

Ad esempio, se vogliamo creare una barra di navigazione nella parte superiore della nostra applicazione, potremmo farlo nel file App.js file sopra il <router-view/> tag in modo che venga visualizzato su tutte le rotte:

<nav> <router-link to="/">Home</router-link> | <router-link to="/about">About</router-link>
</nav>

Il router-link accetta il to='path' attributo che porta l'utente al percorso del componente impostato durante la configurazione del percorso. Questo funziona come il href='path``' attributo in HTML.

Utilizzo di percorsi nominati

L'utilizzo di percorsi con nome ci consente di passare nel name chiave che ha accesso al name proprietà che impostiamo durante la configurazione dei percorsi invece di utilizzare il percorso legando i dati in questo modo:

<router-link :to="{ name: 'About' }">About</router-link>

Un vantaggio dell'utilizzo di questo metodo è che, nel caso in cui decidiamo di modificare il percorso del percorso per le nostre applicazioni di grandi dimensioni, non è necessario iniziare a modificare il percorso di tutti i collegamenti, il che potrebbe risultare complicato.

Routing dinamico

Possono verificarsi situazioni che richiedono l'uso di un routing dinamico per evitare inutili ripetizioni di pagine. Ad esempio, supponiamo di avere un elenco di frutti e di volere che un utente possa fare clic su un frutto specifico e solo i dettagli su quel frutto vengano visualizzati in una pagina dei dettagli del frutto. In questo caso, utilizziamo il routing dinamico.

Avremmo due pagine: una per mostrare i frutti in un elenco e una per mostrare i dettagli di ciascun frutto, che è una pagina "progetto" da compilare con i dettagli del frutto. Creeremo le pagine nella cartella Vue e poi aggiungeremo i percorsi al file routes Vettore:

import FruitsPage from '../views/FruitsPage.vue';
import FruitDetails from '../views/FruitDetails.vue'; const routes = [ { path: '/fruits', name: 'Fruits', component: FruitsPage, }, { path: '/fruits/:id', name: 'FruitDetails', component: FruitDetails, },
];

Lo noteremo per il FruitDetails pagina, abbiamo aggiunto una dinamica id proprietà in modo da ottenere il id parametro e lo usa per interrogare i dati particolari che mostra su quella pagina usando $route.params nel nostro template, rendendo così il percorso dinamico.

Nel FruitsPage, supponiamo di avere una serie di frutti che inseriamo nella nostra applicazione, possiamo avvolgere ogni frutto con un collegamento insieme a parametri in questo modo:

<!-- FruitsPage.vue --> <template> <h1>Fruits page</h1> <div :key="fruit.id" v-for="fruit in fruits"> // dynamic linking by attaching the id as params <router-link :to="{ name: 'FruitDetails', params: { id: fruit.id } }"> <h3>{{ fruit.name }}</h3> </router-link> </div>
</template> <script> export default { data() { return { fruits: [ { id: 1, name: 'Apple', description: "Apples are an incredibly nutritious fruit.", }, { id: 2, name: 'Mango', description: 'A mango is an edible stone fruit produced by the tropical.', }, { id: 3, name: 'Banana', description: 'A banana is an elongated, edible fruit of the genus Musa.', }, ], }; }, };
</script>

A questo punto, quando un utente fa clic su ogni frutto, lo porterà al FruitDetails pagina dove possiamo accedere al id e utilizzalo per identificare i dettagli del frutto che devono essere visualizzati nel FruitDetails .

Accedi ai parametri del percorso

Finora abbiamo visto come trasmettere i parametri a una pagina particolare in modo dinamico, vediamo ora come possiamo accedere a quel parametro nel nostro FruitDetails pagina. Ci sono due modi in cui possiamo accedere ai parametri in Vue: tramite $route.params o facendo uso di oggetti di scena:

utilizzando $parametri.percorso

I parametri sono direttamente accessibili tramite $route.params:

<template> <h1>Fruit Details</h1> <p>This is fruit with the id of {{ $route.params.id }}</p>
</template>

Oppure possiamo accedervi all'interno del ns data() metodo utilizzando this:

<template> <h1>Fruit Details</h1> <p>This is fruit with the id of {{ id }}</p>
</template> <script> export default { data() { return { id: this.$route.params.id, }; }, };
</script>
Usando Vue Props

Un altro metodo semplice per accedere ai dati in modo dinamico tramite percorsi è l'utilizzo di oggetti di scena. Prima dobbiamo impostare props a true nell'oggetto di configurazione dei percorsi:

{ path: '/fruits/:id', name: 'FruitDetails', component: FruitDetails, props: true,
},

In questo modo, tutto ciò che dobbiamo fare dopo è aggiungere props opzione per il script tag e quindi utilizzare gli oggetti di scena all'interno del nostro template etichetta:

<template> <h1>Fruit Details</h1> <p>This is fruit with the id of {{ id }}</p>
</template> <script> export default { props: ['id'], };
</script>

Errori 404 – Nessun percorso trovato

Nel caso in cui un utente navighi su un percorso inesistente, Vue caricherà la pagina ma senza alcun componente, producendo una pagina vuota. In questo caso, la cosa migliore da fare è visualizzare una pagina 404 con forse un pulsante che li porta alla home page o ovunque crediamo vogliano andare.

Questo è facilmente gestibile creando un componente per la nostra pagina 404 e quindi aggiungendo un percorso 404 all'array di percorsi del file di configurazione del nostro router, ma questa volta utilizzeremo un'espressione regolare per catturare tutti i percorsi che non sono stati dichiarati in precedenza:

{ path: '/:catchAll(.*)', name: 'ErrorPage', component: ErrorPage,
}

I :catchAll è il segmento dinamico che riceve un'espressione regolare di (.*) in cui Vue Router utilizza per verificare se il percorso verso cui naviga l'utente è definito nel file di configurazione del nostro router. Se tali percorsi non esistono, l'utente viene indirizzato al componente, che nel nostro caso è il ErrorPage componente:

<template> <h2>404 Page</h2> <p>This is a 404 page</p> <p>Visit home page <router-link to="/">here</router-link></p>
</template>

Reindirizzamenti

In una situazione in cui desideriamo che gli utenti vengano reindirizzati quando visitano un percorso specifico, ad esempio, se avevamo un percorso precedente che non utilizziamo più, vogliamo che gli utenti vengano reindirizzati a quello nuovo quando visitano quel percorso. Ciò si ottiene facilmente aggiungendo un nuovo oggetto al nostro array di configurazione delle rotte, con a redirect campo:

{ path: '/fruits', name: 'Fruits', component: FruitsPage,
},
{ path: '/all-frults', redirect: '/fruits',
},

Tutto il codice sopra fa è che se un utente visita, il percorso /all-fruits, li reindirizzerebbe al /fruits percorso.

Navigazione programmatica

Finora abbiamo imparato molto sul routing, ma c'è un'altra cosa che vorresti sapere: come eseguire la navigazione programmatica. Definiamo la navigazione programmatica come una situazione in cui un utente viene reindirizzato/indirizzato in base a un'azione specifica che si verifica su un percorso, come un'azione di accesso o registrazione, oppure facendo clic su un pulsante specifico, come un pulsante "torna indietro".

Storia del router

Possiamo utilizzare la cronologia del browser per navigare facilmente avanti o indietro, a seconda delle nostre preferenze. Se ricordi, abbiamo a createRouter() funzione nel file di configurazione del router in cui impostiamo a history valore, consentendo al router Vue di tenere traccia della cronologia del nostro router durante il percorso attraverso l'applicazione web.

Questo ci consente di attraversare la cronologia del browser, in base a una condizione come il clic di un pulsante:

<template> <h1>Fruit Details</h1> <p>This is fruit with the id of {{ id }}</p> <button @click="goBack">Go Back</button>
</template> <script> export default { props: ['id'], methods:{ goBack(){ this.$router.go(-1) } } };
</script>

Possiamo anche decidere di andare avanti utilizzando il 1 invece di -1 e supponiamo di voler muoverci di 2 passi possiamo usare entrambi 2 or -2.

Spingi

push() viene in genere utilizzato dopo che si è verificata un'azione e aggiunge una nuova voce allo stack della cronologia. Ad esempio, se un utente accede correttamente, vorremmo passare alla pagina del dashboard in modo programmatico. Ciò si ottiene includendo il metodo push accanto al nome del percorso:

this.$router.push({ name: 'Dashboard' });

Nota: Dobbiamo assicurarci che il percorso sia dichiarato nel nostro file di configurazione del router, altrimenti non funzionerà e ci reindirizzerà alla pagina 404.

Conclusione

Il routing è una delle funzionalità principali di Vue. A meno che tu non stia costruendo un Applicazione a pagina singola (SPA), ti consigliamo di collegare più pagine a una pagina di destinazione per consentire agli utenti di navigare attraverso di esse.

In questa guida, abbiamo dato un'occhiata a cos'è il routing, come puoi installare il file vue-router nei progetti nuovi ed esistenti, come eseguire il caricamento lazy, navigare tra i percorsi, eseguire il routing dinamico, accedere ai parametri del percorso ed eseguire la navigazione programmatica.

Timestamp:

Di più da Impilamento