Implémentation de la redirection dynamique de routage Vue et de la garde de navigation

Cette fois, je vais vous présenter la mise en œuvre de la redirection dynamique de routage Vue et de la navigation guard. Quelles sont les précautions pour la mise en œuvre de la redirection dynamique de routage et de la garde de navigation Vue. le combat réel Jetons un coup d’œil au cas.

Selon la documentation officielle de vue, il existe des exemples détaillés de redirection, mais il n'y a pas beaucoup de descriptions sur la façon d'utiliser la redirection dynamique. La description de la partie redirection est la suivante :

<.>Redirection

La redirection se fait également via la configuration des routes. L'exemple suivant redirige de /a vers /b :

const router = new VueRouter({
 routes: [
 { path: '/a', redirect: '/b' }
 ]
})

La cible redirigée est. Peut également être une route nommée :

const router = new VueRouter({
 routes: [
 { path: '/a', redirect: { name: 'foo' }}
 ]
})

ou encore une méthode qui renvoie dynamiquement la cible de la redirection :

const router = new VueRouter({
 routes: [
 { path: '/a', redirect: to => {
  // 方法接收 目标路由 作为参数
  // return 重定向的 字符串路径/路径对象
 }}
 ]
})`这里写代码片`

Un exemple de redirection dynamique est le suivant :

 { path: '/dynamic-redirect/:id?',
  redirect: to => {
  const { hash, params, query } = to
  if (query.to === 'foo') {
   return { path: '/foo', query: null }
  }
  if (hash === '#baz') {
   return { name: 'baz', hash: '' }
  }
  if (params.id) {
   return '/with-params/:id'
  } else {
   return '/bar'
  }
  }
 }

Tout d'abord, les paramètres sont déconstruits pour obtenir le hachage, les paramètres et la requête, puis un jugement logique est effectué sur la base des valeurs obtenues, puis le routage dynamique est redirigé. La valeur de retour ici est la valeur du chemin, pas la valeur des paramètres. Il doit s'agir d'un chemin existant pour rediriger la route. Et ce chemin ne peut pas être lui-même, car en tant qu'itinéraire de redirection, s'il saute vers lui-même et continue de rediriger, il créera une boucle infinie.

Les exigences actuelles sont les suivantes :

Afin d'empêcher les utilisateurs de modifier par hasard les

paramètres de routage et de provoquer le crash de la page, le routage une redirection est requise, ce qui ne répondra pas aux paramètres requis pour rediriger vers une page canonique. Par exemple, l'utilisateur clique sur le bouton pour accéder à /list/1, mais l'utilisateur modifie 1 et transmet les paramètres non standard à la page. On espère qu'après que l'utilisateur a modifié la valeur du paramètre, il pourra accéder à la norme par défaut. page

L'effet du code ci-dessus est d'obtenir les paramètres de routage. Si l'utilisateur modifie les paramètres de la page qui ne répondent pas aux spécifications, l'itinéraire sera redirigé. Pour que la page puisse obtenir les valeurs de paramètres correctes. L'effet actuel est que si l'utilisateur entre /1, il entrera dans la page normale /list/1. Si l'utilisateur entre /xsajsxoal, /5, /-5 et d'autres paramètres non standard, il passera à /list/. 0.

Bien qu'il n'y ait aucun problème avec la logique de redirection, le problème existe toujours. Que doit faire l'utilisateur s'il continue de modifier /list/1 en /list/xsjknxkja ?

La redirection visible n'est pas adaptée pour résoudre ce problème. À l'heure actuelle, la garde de navigation de vue routage est utilisée. La mise en œuvre de la garde de navigation est la suivante :

 {
  path: '/:type',
  name: 'normal',
  component: index,
  beforeEnter (to, from, next) {
  if (/^[0-3]$/.test(to.params.type)) {
   next()
  } else {
   next('/0')
  }
  }
 }

Le document officiel sur la garde de navigation est décrit comme suit :

Comme son nom suggère, vue-router fournit Le garde de navigation est principalement utilisé pour protéger la navigation en sautant ou en annulant. Il existe de multiples possibilités d'intégration dans le processus de navigation sur itinéraire : globalement, exclusivement pour un seul itinéraire, ou au niveau des composants. Les modifications apportées aux paramètres de

mémorisation ou à la

requête ne déclencheront pas l'entrée/la sortie des gardes de navigation. Vous pouvez répondre à ces modifications en observant l'objet $route ou en utilisant la protection intégrée au composant beforeRouteUpdate.

Vous pouvez utiliser router.beforeEach pour enregistrer une garde globale beforeEach :

const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
 // ...
})

Lorsqu'une navigation est déclenchée, la garde globale beforeEach est appelée dans l'ordre de création. Les gardes sont analysées et exécutées de manière asynchrone. À ce stade, la navigation attend que toutes les gardes soient résolues.

Chaque méthode de garde reçoit trois paramètres :

vers : Route : L'objet route cible à saisir

de : Itinéraire : L'itinéraire que quitte la navigation actuelle

suivant : Fonction : Assurez-vous d'appeler cette méthode pour résoudre ce hook. L'effet d'exécution dépend des paramètres d'appel de la méthode suivante.

next() : Passe au hook suivant dans le pipeline. Si tous les hooks sont exécutés, l'état de navigation est confirmé.

suivant(false) : Interrompre la navigation en cours. Si l'URL du navigateur change (peut-être manuellement par l'utilisateur ou par le bouton Précédent du navigateur), l'adresse URL sera réinitialisée à l'adresse correspondant à l'itinéraire d'origine.

suivant('/') ou suivant({ chemin : '/' }) : accédez à une autre adresse. La navigation en cours est interrompue et une nouvelle navigation démarre.

next(error): (2.4.0+) Si le paramètre passé à next est une instance d'erreur, la navigation sera terminée et l'erreur sera transmise à router.onError() Rappel enregistré .

Assurez-vous d'appeler la méthode suivante, sinon le hook ne sera pas résolu.

Selon les exigences, vous n'avez pas besoin d'utiliser la garde globale. Il vous suffit d'utiliser la garde exclusive d'itinéraire. Par conséquent, il vous suffit d'ajouter avant d'entrer dans l'itinéraire, puis de déterminer s'il répond au paramètre. Si tel est le cas, utilisez next() pour entrer le hook suivant, sinon utilisez next('/') pour accéder à l'adresse cible.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Résumé des compétences en analyse de données JS

Le routage vue.js n'est pas valide et ne peut pas être utilisé

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!