Guide du routeur Vue

Introduction

Lorsque vous développez des applications Web avec Vue.js, à moins que vous ne construisiez un Application à page unique (SPA), vous souhaiterez connecter plusieurs pages à une page de destination pour permettre aux utilisateurs de les parcourir. Ceci est connu comme routage.

Le routage est le processus par lequel un utilisateur est dirigé vers différentes pages d'un site Web. Vue.js est un framework JavaScript utilisé pour créer des applications à page unique, ce qui signifie que cette application n'est chargée qu'une seule fois du serveur au navigateur, et le navigateur n'a pas besoin de recharger lors du routage ; au lieu de cela, il demande simplement ces pages et elles sont chargées.

Dans ce guide, nous apprendrons à faire du routage avec Vue.js et nous nous plongerons dans les différents types de routage qui peuvent être effectués et comment ils peuvent être effectués.

Pour commencer

Le routage dans Vue.js se fait avec Routeur Vue, qui fonctionne en tandem avec la bibliothèque centrale Vue pour nous permettre de mettre en place un système de routage. Nous aimerions utiliser vue-router dans deux scénarios dans notre projet. Nous voulons soit utiliser le routeur dans un projet existant, soit l'ajouter lors de la création d'un nouveau projet.

Configurer Vue Router dans un projet existant

Intégration vue-router dans un projet existant peut être technique, et nous allons passer en revue ces détails maintenant. La première étape consisterait à installer le package vue router à l'aide de la commande suivante :

! npm install vue-router@4

Une fois installé, accédez au src dossier et créez un dossier appelé router, suivi d'un fichier appelé index.js dans l' router dossier, qui servira de fichier de configuration de notre routeur. Notre src répertoire ressemblera maintenant à ceci :

Dans le index.js , assurons-nous de coller le code ci-dessous, qui est le code de configuration du routeur :

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

Nous avons routes tableau qui contient un seul objet, qui peut être plusieurs objets où chaque objet représente une seule route. Pour le moment, nous n'avons créé que celui qui redirigerait vers le composant de la page d'accueil.

Chacun de ces routes objets est généralement composé des path, qui est le chemin de l'URL par rapport à la racine du site, le name, qui sert d'identifiant, et le component, que nous avons importé en haut de la page.

Outre le tableau de routes, nous configurons l'instance de routeur en bas en créant un createRouter() fonction et en passant dans le history les valeurs clés et les routes tableau, puis nous exportons le router instance à utiliser dans notre application.

Pour utiliser cette configuration de routeur dans notre application, ouvrez le main.js déposer dans le src dossier, import router from "./router", puis ajoutez .use(router) jusqu'à XNUMX fois createApp(App) ainsi que le .mount('#app') tout comme c'est ci-dessous:

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

Ce vue-router a été globalement configuré dans notre application, et la prochaine étape consiste à l'utiliser dans notre application. Ceci est facilement accompli en incluant <router-view /> au sein du App.js balise de modèle, qui n'affiche que la route correspondante :

<!--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>

Configuration des itinéraires dans Vue.js

Les routes sont généralement créées dans le router/index.js tableau de routes du fichier, et ces routes se connectent aux composants. Il est recommandé de créer un dossier de vues dans lequel toutes les pages vues seront stockées. Par exemple:

À ce stade, nous savons maintenant comment configurer manuellement les routes.

Installer Vue Router avec Vue CLI

Si nous sommes sur le point de créer un nouveau projet et pensons que nous utiliserons vue-router, il est plus facile de le faire lors de la création du projet.

Tout ce que nous avons à faire est d'utiliser Vue CLI pour installer la version la plus récente de vue-router tout en sélectionnant manuellement les fonctionnalités dans le processus de création de notre projet :

Lisez et apprenez-en plus sur la création d'un projet Vue.js via notre Guide de la CLI Vue!

Itinéraires de chargement paresseux avec le routeur Vue

Au fur et à mesure que notre application grandit, la taille du bundle augmente, ce qui allonge le temps de chargement de notre site. On peut utiliser vue-router d'implémenter le chargement différé pour éviter de charger certaines routes spécifiques jusqu'à ce que l'utilisateur les demande spécifiquement.

Ceci est généralement accompli dans le fichier de configuration du routeur en supprimant le import déclaration en haut et en la remplaçant par une déclaration d'importation dynamique dans l'option component de notre route :

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;

Naviguer entre les routes avec

Jusqu'à présent, nous avons pu créer des routes, mais comment naviguons-nous au sein de notre application ? Nous utilisons le <router-link> balise au lieu de la <a> élément en HTML pour gérer le routage.

Par exemple, si nous voulons créer une barre de navigation en haut de notre application, nous pourrions le faire dans le App.js fichier au-dessus du <router-view/> balise pour qu'elle s'affiche sur toutes les routes :

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

Le lien routeur accepte le to='path' attribut qui amène l'utilisateur au chemin du composant tel qu'il a été défini lors de la configuration de la route. Cela fonctionne comme le href='path``' attribut en HTML.

Utilisation de routes nommées

L'utilisation de routes nommées nous permet de passer dans le name clé qui a accès à la name propriété que nous définissons lors de la configuration des routes au lieu d'utiliser le chemin en liant les données de cette manière :

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

L'un des avantages de l'utilisation de cette méthode est que si nous décidons de modifier le chemin de routage pour nos grandes applications, nous n'avons pas besoin de commencer à modifier tous les chemins de liens, ce qui pourrait être fastidieux.

Routage dynamique

Des situations peuvent survenir qui nécessitent l'utilisation d'un routage dynamique pour éviter la répétition inutile de pages. Par exemple, supposons que nous ayons une liste de fruits et que nous souhaitions qu'un utilisateur puisse cliquer sur un fruit spécifique et que seuls les détails concernant ce fruit soient affichés sur une page de détails sur les fruits. Dans ce cas, nous utilisons le routage dynamique.

Nous aurions deux pages - une pour présenter les fruits dans une liste et une pour montrer les détails de chaque fruit, qui est une page "plan" à remplir avec les détails du fruit. Nous allons créer les pages dans le dossier Vue, puis ajouter les itinéraires au routes tableau:

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, },
];

On remarquera que pour le FruitDetails page, nous avons ajouté une dynamique id propriété afin qu'il obtienne le id paramètre et l'utilise pour interroger les données particulières qui s'affichent sur cette page à l'aide $route.params dans notre modèle, rendant ainsi l'itinéraire dynamique.

Dans le FruitsPage, supposons que nous ayons un tableau de fruits que nous bouclons dans notre application, nous pouvons envelopper chaque fruit avec un lien à côté des paramètres de cette façon :

<!-- 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>

À ce stade, lorsqu'un utilisateur clique sur chaque fruit, il l'amènera à la FruitDetails page où nous pouvons accéder à la id paramètre et utilisez-le pour identifier les détails du fruit qui doivent être affichés dans le FruitDetails .

Accéder aux paramètres de l'itinéraire

Jusqu'à présent, nous avons vu comment transmettre dynamiquement des paramètres à une page particulière, voyons maintenant comment nous pouvons accéder à ce paramètre dans notre FruitDetails page. Il y a deux façons d'accéder aux paramètres dans Vue - via $route.params ou en utilisant des accessoires :

En utilisant $route.params

Les paramètres sont directement accessibles via $route.params:

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

Ou nous pouvons y accéder dans notre data() méthode utilisant 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>

Utilisation des accessoires Vue

Une autre méthode simple pour accéder dynamiquement aux données via des routes consiste à utiliser des accessoires. Nous devons d'abord fixer props à true dans l'objet de configuration des routes :

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

De cette façon, tout ce que nous avons à faire ensuite est d'ajouter props option à la script balisez puis utilisez les accessoires de notre template tag:

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

Erreurs 404 - Route introuvable

Dans le cas où un utilisateur navigue vers une route inexistante, Vue chargera la page mais sans aucun composant, produisant une page vide. Dans ce cas, la meilleure chose à faire est d'afficher une page 404 avec peut-être un bouton les menant à la page d'accueil ou à l'endroit où nous pensons qu'ils aimeraient aller.

Ceci est facilement géré en créant un composant pour notre page 404, puis en ajoutant une route 404 au tableau de routes de notre fichier de configuration de routeur, mais cette fois, nous utiliserons une expression régulière pour capturer toutes les routes qui n'ont pas été déclarées précédemment :

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

Les :catchAll est le segment dynamique qui reçoit une expression régulière de (.*) dans lequel Vue Router vérifie si la route vers laquelle l'utilisateur navigue est définie dans le fichier de configuration de notre routeur. Si de telles routes n'existent pas, l'utilisateur est dirigé vers le composant, qui dans notre cas est le ErrorPage composant:

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

Les redirections

Dans une situation où nous voulons que les utilisateurs soient redirigés lorsqu'ils visitent un itinéraire spécifique, par exemple, si nous avions un ancien itinéraire que nous n'utilisons plus, nous voulons que les utilisateurs soient redirigés vers le nouveau lorsqu'ils visitent cet itinéraire. Ceci est facilement accompli en ajoutant un nouvel objet à notre tableau de configuration de routes, avec un redirect champ:

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

Tout ce que fait le code ci-dessus est que si un utilisateur visite, le chemin /all-fruits, cela les redirigerait vers le /fruits trajet.

Navigation programmatique

Jusqu'à présent, nous avons beaucoup appris sur le routage, mais il y a encore une chose que vous voudrez savoir : comment effectuer une navigation par programmation. Nous définissons la navigation programmatique comme une situation dans laquelle un utilisateur est redirigé/dirigé en fonction d'une action spécifique qui se produit sur un itinéraire, telle qu'une action de connexion ou d'inscription, ou en cliquant sur un bouton spécifique, tel qu'un bouton "retour".

Historique du routeur

Nous pouvons utiliser l'historique du navigateur pour naviguer facilement en arrière ou en avant, selon nos préférences. Si vous vous souvenez, nous avons un createRouter() fonction dans le fichier de configuration du routeur où nous définissons un history valeur, permettant au routeur Vue de garder une trace de l'historique de notre routeur pendant que nous parcourons l'application Web.

Cela nous permet de parcourir l'historique du navigateur, sur la base d'une condition telle qu'un clic sur un bouton :

<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>

On peut aussi décider d'aller de l'avant en utilisant le 1 au lieu de -1 et supposons que nous voulions nous déplacer de 2 étapes, nous pouvons utiliser soit 2 or -2.

Push

push() est généralement utilisé après qu'une action se soit produite et ajoute une nouvelle entrée à la pile d'historique. Par exemple, si un utilisateur se connecte avec succès, nous aimerions être dirigés vers la page du tableau de bord par programmation. Ceci est accompli en incluant la méthode push à côté du nom de la route :

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

Conclusion

Le routage est l'une des principales fonctionnalités de Vue. À moins que vous ne construisiez un Application à page unique (SPA), vous souhaiterez connecter plusieurs pages à une page de destination pour permettre aux utilisateurs de les parcourir.

Dans ce guide, nous avons examiné ce qu'est le routage, comment vous pouvez installer le vue-router dans les projets nouveaux et existants, comment effectuer un chargement paresseux, naviguer entre les routes, effectuer un routage dynamique, accéder aux paramètres de route et effectuer une navigation programmatique.

• Coinsmart. Le meilleur échange Bitcoin et Crypto d'Europe.
• Platoblockchain. Intelligence métaverse Web3. Connaissance amplifiée. ACCÈS LIBRE.
• CryptoHawk. Radar Altcoins. Essai gratuit.
• Source : https://stackabuse.com/guide-to-vue-router/