Une procédure pas à pas complète / Blogs / Perficient

Comprendre le routeur Vue.js

Le routage Vue.js agit comme un guide pour votre application Web, lui indiquant sur quelle page ou quel composant présenter à mesure que l’URL change. Cette fonctionnalité permet la création d’expériences interactives multipages dans le cadre d’une application monopage.

Dans ce blog, nous explorerons les éléments essentiels du routage Vue.js, englobant la création d’itinéraires, la navigation entre les pages et la gestion du routage dynamique.

Étape 1 : Installer Vue Router

La première étape consiste à intégrer Vue Router dans votre projet. Si vous utilisez Vue CLI, il est intégré sans effort en incluant Vue Router lors de la création du projet. Sinon, utilisez npm ou fil pour l’installation.

Si vous avez déjà installé Vue Router lors de la configuration initiale de Vue CLI, vous n’avez pas besoin de l’installer séparément. Il est inclus par défaut dans votre projet.

Étape 2 : Créer une configuration de routeur

Assurez-vous d’avoir des composants correspondant à chaque itinéraire défini dans votre routeur. Par exemple, Home.vue, About.vue et autres. Chemin : src/view/Home.vue

Le ‘Logo’ Le composant affiche l’image du logo Vue et est utilisé dans le contenu du composant de la page d’accueil. Son nom est « Logo ».

Répétez cette structure About.vue pour d’autres composants tels que ContactUs, Careers, etc.

Configuration du routeur Vue :

Créez une configuration de routeur. Chemin : src/router/index.js

• créerRouter({ … }): crée un objet routeur, qui ressemble à une carte qui aide votre application Vue.js à savoir comment gérer différentes URL de pages Web.
• créerWebHistory(): spécifie le type de mode historique du routeur. En termes simples, il indique au routeur comment gérer les URL dans le navigateur.
• itinéraires : est un tableau qui répertorie toutes les différentes pages ou vues de votre application et quel composant doit être affiché pour chaque URL. Par exemple, vous pouvez avoir un itinéraire pour la page « Accueil » et un autre pour une page « À propos ».

Ce code configure les itinéraires dans Vue Router pour différentes pages : Accueil, À propos, ContactUs et Carrières, chacune étant liée à un chemin d’URL et à un composant Vue spécifiques. Il configure le routeur pour gérer la navigation en fonction de ces itinéraires dans une application Vue.js.

Étape 3 : branchez le routeur sur votre application

Dans votre fichier d’application principal (main.js), intégrez le routeur :

Ce code initialise une application Vue.js à l’aide d’un composant racine nommé ‘app.view’. Il comprend également un routeur pour gérer différentes pages et monte l’application sur un élément HTML avec l’ID ‘application’le rendant visible sur la page Web.

Étape 4 : Utiliser les liens du routeur

Maintenant que le routeur est configuré, utilisez pour la navigation :

Sortir:

•  : Ce sont les composants spéciaux de Vue Router qui créent des liens pour naviguer entre les différents itinéraires (pages) de votre application.
• Accueil : Ce code produit un lien intitulé « Maison. » En cliquant dessus, les utilisateurs sont dirigés vers l’itinéraire défini comme « / »-généralement, représentant la page d’accueil. Pour étendre cette navigation à d’autres composants comme About.vue, ContactUs, etc., répliquez cette structure de liens et spécifiez le chemin de la page.
•  : Un autre composant spécialisé de Vue Router servant d’espace réservé. Il affiche le contenu en fonction de l’itinéraire actuellement actif. En cliquant sur un L’élément déclenche le rendu du composant de l’itinéraire associé au sein de cet élément élément.

En termes plus simples, ce code crée un menu avec des liens vers « Accueil », « À propos », « Contact » et « Carrières ». Lorsque vous cliquez sur un lien, le contenu de cette page s’affiche là où vous vous trouvez. C’est comme une carte qui vous permet de vous déplacer facilement dans votre application Vue.js. Le « lien de routeur » rend ces liens cliquables possibles.

Conclusion

Le routage Vue.js guide votre application pour afficher différentes pages à mesure que l’URL change. Ce blog explique comment configurer des itinéraires, lier des pages et créer une barre de navigation à l’aide de Vue Router. Il montre comment cliquer sur des liens affiche instantanément le contenu associé, ce qui facilite la navigation dans votre application.