Editions ENI Livres | Vidéos | e-Formations
Utiliser Vue Router pour la navigation
Définition et installation
1. Définition
Avec une SPA (Single Page Application), le serveur sert un fichier index.html au navigateur. Il n’y a pas de changement de page lors de la navigation. Aucune URL supplémentaire n’est utilisée. Les composants de la page sont instanciés et détruits dynamiquement par Vue.js.
On parle aussi "d’état" de l’application pour désigner le contenu de la page à un instant donné.
L’inconvénient pour l’utilisateur est qu’il ne peut accéder à un état particulier de la page avec une URL comme pour un site traditionnel.
Dans le cadre d’un blog, par exemple, il n’est donc pas possible de se rendre directement sur un article donné. De même, les boutons Page précédente et Page suivante du navigateur ne fonctionnent pas.
Pour pallier ce problème, il est nécessaire d’utiliser un routeur. Un routeur permet de définir des routes. Une route désigne une chaîne de caractères placée à la suite de l’URL de base de l’application :
http://www.domain.com/ma_route Une route peut alors correspondre à l’affichage d’un ou plusieurs composants.
Pour utiliser des routes dans une application Vue.js, on utilise le plugin officiel Vue Router.
2. Installation
a. Télécharger...
Usage
1. Définition d’une route
Pour définir une route simplement dans le tableau routes, on utilise un objet avec la propriété path, qui prend pour valeur la chaîne de caractères affichée dans l’URL, et la propriété component, qui prend en valeur le composant à afficher. On appelle également cet objet un itinéraire de route :
import MonComposant1 from "@/views/MonComposant1"
import MonComposant2 from "@/views/MonComposant2"
const routes = [
{ path: '/route1', component: MonComposant1 },
{ path: '/route2', component: MonComposant2 }
] Une route peut également comporter des propriétés supplémentaires que nous verrons plus en détail par la suite.
|
Propriétés |
Description |
|
path |
Chaîne de caractères obligatoire affichée dans l’URL sur le navigateur. |
|
component |
Composant à afficher pour cette route. |
|
name |
Nom de la route (voir la section Les routes nommées). |
|
components |
Objet : { [name: string]: Component }. Permet d’afficher plusieurs composants. La clé name sert dans le cas de vues nommées. |
|
redirect |
Chaîne de caractères, objet de type natif Location ou fonction qui retourne l’une de ces valeurs. Permet de rediriger l’utilisateur sur une autre route ou URL (voir la section Les redirections). |
|
props |
Chaîne de caractères, objet ou fonction qui retourne l’une de ces valeurs. Permet de passer une ou plusieurs valeurs dynamiquement aux props du composant à afficher (voir la section Routes dynamiques). |
|
alias |
Prend en valeur une chaîne de caractères ou un tableau de chaînes de caractères. Permet d’utiliser un alias qui sera affiché à la place de la propriété path. Notamment utilisé avec des routes imbriquées, si l’on ne souhaite pas afficher les différents niveaux d’imbrication dans l’URL. On utilise alors le même alias pour plusieurs routes imbriquées (voir la section Les routes imbriquées). |
|
children |
Prend en valeur un tableau de routes. Permet de définir des routes imbriquées. |
|
beforeEnter |
Fonction qui prend trois paramètres :... |
Navigation programmée
1. Navigation programmée avec $router
a. $router.push() et $router.replace()
Le composant <router-link> appelle en fait sous le capot la méthode push de l’objet VueRouter. Celle-ci peut prendre en paramètre :
-
location : chemin de la route ou objet possédant les mêmes propriétés que l’objet passé à la prop to du composant <router-link> ;
-
onComplete : hook appelé une fois que la route a bien été chargée ;
-
onAbort : hook appelé lorsque le chargement de la route s’est arrêté (redirection vers une autre route entre temps par exemple).
router.push(location, onComplete?, onAbort?); Les paramètres suffixés par un point d’interrogation sont facultatifs.
L’objet VueRouter est également accessible via la variable d’instance $router pour tous les composants.
Exemple d’un traitement suite au clic sur un bouton qui redirige l’utilisateur vers une autre route :
<template>
<button @click="traiter">Cliquez ici</button>
</template>
<script>
export default {
name: 'MonComposant',
methods: {
traiter() {
console.log('changement de route');
this.$router.push("/route", function() {
console.log("changement de route effectué");
})
}
}
}
</script> Lorsque la méthode push est appelée, la route est enregistrée dans l’historique du navigateur. Il est ainsi possible d’utiliser les boutons Retour et Avancer du navigateur.
La méthode $router.replace() agit de la même manière que la méthode $router.push(), à la différence qu’il n’y a pas de nouvelle entrée dans l’historique. La route cible indiquée en paramètre remplace la précédente.
b. $router.forward(), $router.back(), $router.go()
$router.back() est la fonction utilisée...
Pour aller plus loin
1. Les transitions
a. Le composant <transition>
Vue.js permet de facilement appliquer des effets visuels de transition lorsqu’un élément du DOM est ajouté, modifié ou supprimé.
Nous n’avons pas abordé cette partie dans cet ouvrage mais vous pouvez vous rendre sur la documentation officielle pour en savoir plus :
https://fr.vuejs.org/v2/guide/transitions.html
Cela dit, nous allons voir les principes de base d’une transition entrante et d’une transition sortante avec une transition de type fondu. Le composant courant s’effacera progressivement (transition sortante) pour laisser apparaître progressivement, en parallèle, le composant activé par la route cible (transition entrante).
On parle de transition entrante pour l’insertion dans le DOM du composant activé par la route cible et de transition sortante pour la suppression dans le DOM du composant activé par la route courante.
Les transitions s’appliquent très simplement lors de la navigation d’une route à l’autre. On englobe pour cela le composant <router-view> dans un composant <transtition>.
Ce composant possède une prop name qui prend en valeur le nom de la transition. On utilise ensuite des classes CSS préfixées par la valeur de cette prop pour décrire sur quelle propriété CSS du composant on applique un état transitoire, pour quelle durée, et l’état final qu’aura cette propriété une fois la transition terminée.
// fichier MonComposant.vue
<template>
<transition name="fade">
<router-view />
</transition>
</template>
<style>
.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
</style> Lorsqu’on change de route, Vue.js cherche si l’élément cible, ici <router-view>, possède des classes de transition appliquées. Si c’est le cas, il applique celles-ci sur l’élément au moment voulu, suivant la classe CSS.
Une transition entrante et une transition...
