Comment utiliser le routeur Vue

Découvrez comment configurer un SPA avec Vue Router et les premières étapes pour contrôler le routage au sein de notre application.

Une partie extrêmement importante de la création d’une application monopage (SPA) est la possibilité de contrôler le flux de votre utilisateur dans les pages de l’application.

Parfaitement intégré au framework Vue, nous avons la solution de Vue Router. Vue Router nous permet de contrôler le flux de navigation des utilisateurs dans les pages de notre application, d’éviter les « rechargements de page complète » inconvenants qui sont typiques d’une page non SPA et même de mettre en place des gardes pour des itinéraires particuliers.

Dans cet article, nous explorerons la configuration d’une application avec Vue Router et les premières étapes pour contrôler le routage au sein de notre application.

Installation du routeur Vue

Si vous configurez une nouvelle application Vue, vous aurez la possibilité d’ajouter Vue Router au modèle de démarrage lors de l’exécution de l’assistant. C’est le moyen le plus simple d’installer Vue Router sur une nouvelle application.

Si vous souhaitez ajouter Vue Router à votre application existante, installez d’abord le package en utilisant soit npm ou yarn.

npm install vue-router@4

// OR

yarn add vue-router@4

Création d’une instance de routeur

Notre application a besoin de quelque chose pour contrôler la navigation de notre utilisateur : c’est ce qu’on appelle un router instance. Vue Router a deux composants principaux :

• Routeur – Le « cerveau », il contrôle la navigation et nous aide à diriger l’utilisateur vers d’autres pages.
• Itinéraire(s) – Un objet contenant les informations sur l’itinéraire actuel qu’un utilisateur visite

Une pratique courante consiste à créer le router dans un router.js fichier, nous allons donc l’ajouter à la racine de notre application.

router.js

import { createWebHistory, createRouter } from 'vue-router'

import HelloWorld from './components/HelloWorld.vue'
import GoodbyeWorld from './components/GoodbyeWorld.vue'

const routes = [
  { path: "https://www.telerik.com/", name: "home", component: HelloWorld },
  { path: "/goodbye", name: "goodbye", component: GoodbyeWorld },
];

export const router = createRouter({
  history: createWebHistory(),
  routes,
})

Séparons cela et jetons un œil à ce qui se passe ici.

Tout d’abord, nous importons createWebHistory et createRouter de notre vue-router emballer. createWebHistory est un mode historiquequi contrôle la façon dont Vue Router créera des routes pour nous.

Vue Router propose plusieurs modes d’historique différents, mais vous l’utiliserez 99 % du temps createWebHistory qui crée des itinéraires d’apparence normale qui ressemblent à : mySite.com/this/is/my/url.

Ensuite, nous importons nos composants. Certaines personnes aiment les séparer en un views dossier à des fins d’organisation, mais ce seront les principaux points d’entrée de votre application à chacune des « pages ». Nous avons créé ici deux composants factices, HelloWorld et GoodbyeWorld. Chacun d’eux contient uniquement un message indiquant soit Hello ou Goodbyedonc aucune logique sous-jacente en eux.

Dans un troisième temps, nous déclarons un routes tableau. Ce tableau contient une collection de objects. Chacun de ces objets est un Enregistrement d’itinéraireque nous utilisons pour décrire les itinéraires que nous ajouterons à notre application. Pour chaque page ou vue de votre application, vous en ajouterez une.

Notez le premier enregistrement :

{ path: "https://www.telerik.com/", name: 'home', component: HelloWorld },

Nous ouvrons la voie à / ce qui signifie que ce sera notre itinéraire d’origine lorsque notre utilisateur visitera notre site Web. mysite.com cet itinéraire sera affiché. Nous déclarons également que le composant de cette route est HelloWorld. J’ai également ajouté un name pour cet itinéraire, il s’agit d’une chaîne personnalisée et peut être ce que vous voulez. J’ai choisi home car ce sera notre route de retour.

Notez le deuxième itinéraire :

{ path: '/goodbye', name: 'goodbye', component: GoodbyeWorld }

Nous déclarons ici que le chemin de cet itinéraire est /goodbyecela signifie que Vue Router essaiera de correspondre l’URL du navigateur vers ce chemin. Lorsque l’utilisateur visite mysite.com/goodbyesoit par un lien dans notre page Web, soit en le saisissant directement dans la zone URL du navigateur, Vue Router chargera le composant GoodbyeWorld et montrez-le à nos utilisateurs. Cet itinéraire aura name « au revoir. »

Enfin, nous créons le router en utilisant le createRouter fonction, et nous lui passons un seul paramètre comme objet de configuration avec notre history mode et le routes tableau que nous avons créé.

Notez que le router la constante est d’être exported afin que nous puissions l’utiliser à l’étape suivante.

Dire à Vue d’utiliser Vue Router

Par défaut, Vue ne saura pas utiliser Vue Router. Nous devons aller là où notre application est montée et lui dire de le faire. use notre nouveau routeur.

Par défaut, les applications Vue sont montées sur main.js fichiers. Lorsque vous l’ouvrez, vous devriez voir que c’est là que se trouve votre app est en cours de création et mounted.

Nous allons apporter quelques modifications ici :

main.js

import { createApp } from "vue";
import { router } from "./router";
import App from "./App.vue";

const app = createApp(App);
app.use(router);

app.mount("#app");

La première chose à remarquer est que nous importons router de notre router.js fichier que nous avons créé il y a un peu.

Ensuite, nous appelons le use méthode sur notre app par exemple, et transmettez-le au routeur. Enfin, une fois le routeur ajouté à l’application, nous procédons au montage de l’application comme d’habitude.

C’est ça! Votre application est maintenant prête à utiliser Vue Router sous le capot.

Afficher nos points de vue

La première chose que nous devons faire pour pouvoir afficher à l’utilisateur les composants que nous avons définis dans notre routes est mis en place un RouterView. RouterView est un composant spécial que Vue Router utilise pour injecter la vue actuelle (en fonction de l’URL actuelle) afin que l’utilisateur puisse voir son contenu.

L’endroit le plus courant pour ajouter ce composant est notre App.vue fichier, puisque c’est le point d’entrée de notre application.

App.js

<template>
  <img alt="Vue logo" src="https://www.telerik.com/blogs/./assets/logo.png" />
  <router-view />
</template>

Notre App.vue Le fichier contient désormais simplement un logo Vue qui s’affichera dans tous les itinéraires. Notez ceci : il est important de comprendre que tout ce qui n’est pas placé dans les vues de notre routeur sera affiché sur chaque page. Les en-têtes et pieds de page sont un bon exemple de ce comportement souhaité.

Ensuite, nous ajoutons le router-view composant. Vous n’avez pas besoin de l’importer ni de le déclarer dans votre components options dans le fichier App.vue – il a été automatiquement importé globalement lorsque nous l’avons ajouté avec app.use(router).

Si vous visitez la page d’accueil de votre application maintenant, vous devriez voir le HelloWorld composant vous saluant.

Ajout d’une navigation de base

Maintenant que nos itinéraires sont configurés et que Vue Router est tous connectés et prêts à être utilisés sur notre application, nous devons ajouter des liens afin que notre utilisateur puisse naviguer entre eux.

App.vue

<template>
  <nav>
    <ul>
      <li>
        <router-link :to="{ name: 'home' }">Home</router-link>
      </li>
      <li>
        <router-link :to="{ name: 'goodbye' }">Goodbye</router-link>
      </li>
    </ul>
  </nav>

  <img alt="Vue logo" src="https://www.telerik.com/blogs/./assets/logo.png" />
  <router-view />
</template>

J’ai ajouté un ul avec nos deux liens. Vous remarquerez immédiatement que je n’ai pas utilisé a liens, mais plutôt un composant spécial Vue Router, le RouterLink. Encore une fois, nous n’avons pas besoin de l’importer puisqu’il a été automatiquement importé globalement pour nous.

RouterLink a un accessoire très important que nous devons utiliser pour lui indiquer la route vers laquelle il doit nous indiquer, appelé to. Cet accessoire peut prendre soit une chaîne, soit un objet, ce qui signifie que nous pouvons également écrire la version simplifiée comme suit.

<router-link to="home">Home</router-link>

Personnellement, je vous recommanderais de vous habituer à une utilisation plus longue object déclaration comme je l’ai fait sur le premier exemple. Bientôt, vous vous retrouverez à devoir utiliser des paramètres, par exemple, qui nécessiteront l’utilisation du format objet. C’est déjà le bon moment pour vous familiariser avec l’API, plus complexe, mais plus puissante.

En cliquant sur le Goodbye le lien nous dirigera correctement vers le goodbye itinéraire. Notez l’URL dans la barre du navigateur. 🎉

Conclusion

Cela ne fait que commencer à réduire la puissance de Vue Router et ce que nous pouvons en faire. Je recommande de plonger profondément dans leur documentation– il est bien écrit et regorge d’exemples sur la façon de réaliser des scénarios de routage typiques.

Bon routage !