/ home / profile ) dans votre application mais présente des fonctionnalités que certaines personnes ne connaissent pas. Dans ce tutoriel, nous allons découvrir certaines fonctionnalités étonnantes du routeur Vue et comment nous pouvons les utiliser dans notre application.
Vue Router est le routeur officiel de Vue. Il s'intègre profondément au cœur de Vue pour faciliter la création d'applications à une seule page avec Vue. Certaines de ses fonctionnalités populaires incluent:
- Correspondance d'itinéraire dynamique.
- Routes nommées.
- Vues nommées.
- Navigation programmatique.
Ces fonctionnalités sont très utilisées lors du développement avec Vue et c'est parce qu'elles sont une partie des bases que vous devez comprendre pour utiliser efficacement le routeur. Mais le Vue Router a des fonctionnalités très utiles qui peuvent être très utiles dans le développement et dans cet article, nous allons les examiner.
Pour les besoins de ce tutoriel, nous allons construire un application simple qui aiderait à comprendre certains des concepts abordés dans cet article. Vous pouvez retrouver tout le code utilisé dans cet article sur GitHub . Si vous souhaitez en faire plus avec le routeur, vous bénéficierez de ce tutoriel.
Remarque: Cet article nécessite une compréhension de base de Vuejs et Vue Router.
Scroll Behavior
Ceci est le comportement observé lors de la navigation d'une page à une autre. Le comportement par défaut du routeur Vue n'est perceptible qu'après le défilement vers une position qui n'est pas le haut de la page. En effet, par défaut, la position de défilement lors de la navigation loin d'une page est conservée sur une nouvelle page. Cela signifie que si vous cliquez sur un lien qui mène à une nouvelle route (c'est-à-dire de / home à / about ]) dans une position qui, disons, proche du pied de page de la page actuelle, la nouvelle page commencerait à partir de cette même position au lieu de partir du haut de la page.
J'ai créé une application Vue en utilisant la commande Vue CLI vue create vue-router-demo , J'ai également sélectionné Vue Router dans le cadre des options lors de la configuration de mon application car nous l'utiliserons tout au long de ce tutoriel.
Nous devrons également faire des appels API à JSONPlaceholder pour illustrer certains des les concepts utilisant le routeur Vue. Pour cela, nous utiliserons Axios. Pour installer Axios :
# using YARN
fil ajouter axios
# ou NPM
npm install axios Après avoir installé Axios, nous pouvons mettre à jour notre Home.vue pour ressembler à ceci:
Ici, nous importons axios et l'utilisons pour récupérer une liste de messages de JSONPlaceholder dans la méthode getPost . Nous attribuons également le tableau des messages obtenus à partir de cet appel API aux messages de la fonction data de cette page, car nous souhaitons utiliser ces données dans notre section de modèle. Après cela, nous parcourons le tableau des articles dans une liste (
) et attachons également un lien à chaque article en utilisant id de chaque article comme paramètre de lien (cela s'appelle route dynamique) correspondant ). Nous avons également ajouté un paragraphe qui servirait d'indicateur de chargement.
À ce stade, voici à quoi ressemble cette page:
La prochaine chose serait de créer la page qui affichera les informations pour chaque message et de créer un lien pour celui-ci dans le routeur de notre application.
Message .vue
Ici, nous utilisons passant des accessoires pour acheminer les composants pour définir id et post que nous passons de la page précédente dans la forme des paramètres d'itinéraire. C'est une manière intéressante d'accéder aux paramètres d'itinéraire et à la requête plutôt que de faire ceci:
Post.vue
Nous utilisons ensuite cette valeur post dans la section template pour afficher le titre et le corps du post. Enfin, nous ajoutons un paragraphe à la fin de la page. Nous ajoutons également le style de la page dans la section de style, qui comprend la définition d'une hauteur de 110vh . C'est parce que nous avons besoin que la page ait une hauteur supérieure à la hauteur par défaut 100vh afin que nous puissions observer le comportement de défilement par défaut du routeur.
La prochaine chose serait de créer une route qui afficherait chaque message. Mettez à jour votre fichier index.js dans le dossier / router (ou le fichier router.js ) pour ressembler à ceci:
import Vue from 'vue'
importer VueRouter depuis 'vue-router'
importer la page d'accueil depuis '../views/Home.vue'
Vue.use (VueRouter)
routes const = [{
path: '/',
name: 'Home',
component: Home
},
{
path: '/:id',
name: 'Post',
props: true,
component: () =>
import ( /* webpackChunkName: "post" */ '../views/Post.vue')
}
]
routeur const = nouveau VueRouter ({
mode: 'histoire',
base: process.env.BASE_URL,
itinéraires
})
export default router Ici, nous définissons une nouvelle route qui utilise id qui serait passée à cette route depuis la page d'accueil. Nous découplons également le paramètre du routeur (dans ce cas, post et id ) à l'aide d'accessoires.
Le haut de cette page ressemble à ceci:
Si nous cliquons sur l'un des messages de la page d'accueil qui ne nous oblige pas à faire défiler, nous ne remarquerons aucun comportement bizarre en mode défilement, mais si nous faisons défiler un peu et cliquez sur le dernier message de cette liste, cela devrait être la position sur laquelle la page / post atterrirait:
C'est mauvais pour l'UX et c'est parce que l'utilisateur ne s'attend pas à ce comportement et il peut avoir besoin de commencer par le haut d'une page pour obtenir les informations complètes sur ledit
Vue Router est livré avec l'option de personnaliser ce comportement selon les préférences individuelles, un exemple serait d'enregistrer la position de défilement d'une route précédente lorsque vous essayez de vous déplacer en arrière / en avant. Pour résoudre le problème actuel dans notre application, nous mettrons à jour notre fichier de routeur pour inclure les éléments suivants:
import Vue from 'vue'
importer VueRouter depuis 'vue-router'
importer la page d'accueil depuis '../views/Home.vue'
Vue.use (VueRouter)
routes const = [...]
routeur const = nouveau VueRouter ({
mode: 'histoire',
base: process.env.BASE_URL,
itinéraires,
//Ajoute ça
scrollBehavior (to, from, savedPosition) {
renvoie {x: 0, y: 0}
}
})
Exporter le routeur par défaut Maintenant, si nous faisons défiler vers le bas de la page d'accueil et cliquons sur le dernier message, vous devriez remarquer qu'il commence maintenant à partir du haut de la page.
Récupération de données
Lors de l'extraction de données à partir d'une API, nous appelons la méthode dans le crochet de cycle de vie monté ou créé ce sont de loin les méthodes les plus populaires que les gens utilisent lors du développement dans Vue. Le routeur Vue est livré avec une autre méthode dans laquelle nous faisons cette requête API avant de naviguer vers une nouvelle route en faisant cette requête en utilisant la garde beforeRouterEnter dans un tel composant. Voici un exemple de récupération des données de JSONPlaceholder à l'aide de cette méthode:
beforeRouteEnter (to, from, next) {
axios
.get ("https://jsonplaceholder.typicode.com/posts")
.then ((res) => {
suivant ((vm) => vm.fetchData (res));
})
.catch ((err) => {
console.error (err);
});
},
méthodes: {
fetchData (res) {
let post = res.data;
this.posts = poste;
},
}, Ici, nous récupérons une liste de messages à partir d'une API utilisant Axios et lorsque cette requête est terminée, nous appelons next . À ce stade du cycle de vie de ce composant, ce n'est pas disponible car le composant n'a pas été créé mais nous avons accès à vm qui nous donne accès à l'instance du composant. Dans cette fonction, nous transmettons la réponse de la requête API res à notre méthode fetchData que nous avons créée pour attribuer la valeur de cette réponse à post afin nous pouvons l'utiliser dans notre modèle. Maintenant, si nous actualisons notre route / nous remarquerons que les données sont mises à jour très rapidement et à aucun moment il n'y a de blanc ou de page (à condition que la requête aboutisse).
Transitions
Vue est livré avec un composant transition> qui permet une implémentation facile des transitions CSS et des animations . Cette fonctionnalité peut être étendue pour fonctionner pour la navigation entre les itinéraires dans Vue. Voici un exemple:
Ici, nous ajoutons une transition avec le nom slide-fade à notre application et l'enroulons autour de toute la navigation d'itinéraire qui aurait lieu dans l'application. Nous ajoutons également un ensemble de styles qui contrôlent / définissent le fonctionnement des transitions dans notre application. Sans ces règles, il n'y aurait pas de transition visible. Maintenant, si nous essayons de naviguer de la page d'accueil aux articles individuels, nous remarquerons une transition glissante et décolorée qui se produit pendant le processus de navigation.
Il existe deux types de transitions basées sur l'itinéraire.
1. Transition par route
Ce type de transition est défini dans le composant qui restitue un itinéraire et donc, il n'affecte que la navigation vers et depuis une telle page. Cela nous donne la possibilité de définir une transition spéciale pour les itinéraires individuels si nous le voulons. Voici un exemple de la façon de procéder.
Si vous essayez de quitter cette page, nous remarquerons que la page est biaisée et s'estompe pendant une durée de 2s lorsque la navigation change.
2. Transition dynamique basée sur les routes
Ceci est similaire à la méthode générale d'ajout de transitions à toutes les routes dans votre application, mais il a une différence majeure, c'est-à-dire qu'il accepte une transition dynamique name prop qui vous donne la possibilité de changer le type de transition comme vous le souhaitez. Créons un exemple de la façon de procéder.
Nous allons mettre à jour notre fichier App.vue avec un nom dynamique et le configurer pour choisir un nom de transition en fonction d'une valeur.
Ici, nous ajoutons un nom de transition dynamique qui est défini dans la section script de notre application. Nous surveillons également la $ route afin que chaque fois qu'elle change, nous exécutons la fonction qui vérifie si la route actuelle a un paramètre de id sinon, nous lui donnons une valeur de 0 . Nous déterminons également le nom de la transition en fonction du type de nombre de id (c'est-à-dire nombre pair ou impair). Maintenant, si nous naviguons entre la page de destination et les différents articles disponibles, nous observerons qu'il y a deux types de transitions qui se produisent lorsque nous naviguons.
Meta Fields And Navigation Guards
Meta Fields
Meta fields help provide extra contexte à un certain itinéraire. Un exemple d'un tel contexte serait si un utilisateur doit être authentifié pour accéder à une telle route ou non. Voici à quoi cela ressemble:
import Vue from 'vue'
importer VueRouter depuis 'vue-router'
importer la page d'accueil depuis '../views/Home.vue'
Vue.use (VueRouter)
routes const = [{
path: '/',
name: 'Home',
component: Home,
// add meta to this route
meta: {
requiresAuth: true
}
},
]
routeur const = nouveau VueRouter ({
mode: 'histoire',
base: process.env.BASE_URL,
itinéraires
})
exporter le routeur par défaut Ici, nous avons ajouté une méta-propriété requiresAuth à la route / ce qui signifie que nous voulons que les utilisateurs soient authentifiés avant de pouvoir accéder à cette route. Notez que "requiresAuth" n'est pas une propriété standard, vous pouvez donc choisir le nom que vous préférez. La valeur que vous sélectionnez à la fin peut être accessible dans l'objet $ route . Ce champ méta à ce stade n'empêcherait pas les utilisateurs non autorisés d'accéder à cette route, nous devons le connecter au garde de navigation.
Navigation Guard
Tout comme son nom l'indique, le garde de navigation aide à protéger et à garder les routes en fonction sur vos préférences (c'est-à-dire rediriger vers une autre page ou empêcher la navigation). Cette fonctionnalité fonctionne avec les méta-champs Route pour protéger efficacement les routes de votre application. Il y a 3 façons d'ajouter une protection de routeur dans notre application:
1. In-component
Vue offre la possibilité de configurer la protection de votre routeur pour une route particulière directement à l'intérieur de vos composants. Voici un exemple dans notre fichier Home.vue :
Ici, nous ajoutons un paragraphe qui n'est visible que par les utilisateurs non authentifiés. Nous ajoutons également une propriété qui contrôle la visibilité de ce texte. Enfin, nous avons une méthode de routeur beforeRouteEnter dans laquelle nous connectons également le garde du routeur et vérifions si l'utilisateur est authentifié ou non en utilisant une valeur qui serait ajoutée manuellement plus tard. Nous avons également une instruction if / else et à l'intérieur de cette instruction, nous modifions la valeur de guest en fonction de l'authentification de l'utilisateur.
Et dans votre App .vue ajoutez ce cycle de vie au fichier.
export default {
monté() {
localStorage.setItem ("connecté", faux);
}
}; Donc, si vous actualisez votre application, nous devrions voir le texte que nous avons ajouté dans le fichier Home.vue .
2. Par route
Nous pouvons également ajouter une protection de routeur à nos applications par route dans notre fichier de routeur comme une autre propriété à l'intérieur de l'objet route spécifique. Voici un exemple:
{
chemin: '/',
nom: 'Home',
composant: Accueil,
// ajouter meta à cette route
meta: {
requiresAuth: vrai
},
beforeEnter: (to, from, next) => {
if (to.name! == 'Accueil') {
console.log ('Par-Route navigation guard ti wa online');
suivant()
} autre suivant ()
}
} Ici, nous ajoutons une protection de routeur à la route / et nous enregistrons actuellement un texte aléatoire sur la console, mais nous pouvons faire deux ou trois choses à l'intérieur de cette garde. Maintenant, chaque fois que vous visitez la page d'accueil, vous verrez ceci dans votre console:
3. Globalement
Nous avons également la possibilité de créer une protection de routeur qui fonctionne globalement pour chaque partie de l'application (à condition qu'elle remplisse la condition de garde). Cette garde globale est créée dans le fichier du routeur tout comme la garde par route mais au lieu de la définir à l'intérieur d'un objet route spécifique, elle est définie comme une méthode de l'instance router . Pour un exemple de son fonctionnement, nous allons créer un nouveau fichier et une nouvelle route dans notre application et le nommer guest.vue puis ajouter les lignes de code suivantes au fichier.
Ensuite, nous créons une route / login avec cette page nouvellement créée et ajoutons une méta propriété à d'autres routes existantes.
// créer une nouvelle route
{
chemin: '/ login',
nom: 'login',
composant: () =>
import (/ * webpackChunkName: "auth" * / '../views/guest.vue')
}, {
chemin: '/: id',
nom: 'Post',
props: true, une // propriété meta
meta: {
requiresAuth: vrai
},
composant: () =>
import (/ * webpackChunkName: "post" * / '../views/Post.vue')
} La prochaine chose à faire serait de créer la protection de navigation globale pour toutes les routes qui nécessitent une authentification et de vérifier l'authentification de l'utilisateur à l'aide de localStorage (créé précédemment). Nous redirigerions les utilisateurs qui ont une valeur connecté faux vers / login .
router.beforeEach ((to, from, next) => {
if (to.matched.some ((record) => record.meta.requiresAuth)) {
// cette route nécessite une authentification, vérifiez si vous êtes connecté
// sinon, affiche le message d'accueil de l'invité.
const journalisé = JSON.parse (localStorage.getItem ("connecté"));
if (! connecté) {
suivant({
chemin: '/ login'
});
} autre {
suivant();
}
} autre {
suivant(); // Assurez-vous de toujours appeler next ()!
}
}) Donc, si vous vérifiez votre application dans votre navigateur, vous remarquerez qu'elle est actuellement sur cette page:
Si nous essayons de naviguer vers l'une des routes existantes, nous serions automatiquement redirigés vers cette page, non ce que nous faisons et cela signifie que notre garde de routeur garde effectivement ces routes. [19659123] Conclusion
Nous pouvons voir que le Vue Router est un outil très puissant qui peut être utilisé pour plus que simplement créer des routes dans votre application. Nous avons appris comment configurer le comportement de défilement des routes dans notre application, les différentes façons d'ajouter des transitions aux routes dans notre application, comment récupérer des données à partir d'une API avant qu'un composant ne soit monté, comment utiliser la propriété meta pour nos routes et le
Ressources
Source link