Exemples de redirection dynamique de routage Vue et de garde de navigation

Maintenant, je vais partager avec vous un exemple de redirection dynamique d'itinéraire et de garde de navigation de Vue. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde.

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

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

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

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

 { 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'
  }
  }
 }

Les exigences actuelles sont les suivantes :

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 un itinéraire : globalement, exclusivement pour un seul itinéraire, ou au niveau des composants.

N'oubliez pas que les modifications apportées aux paramètres ou aux requêtes ne déclencheront pas les gardes de navigation d'entrée/sortie. 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) => {
 // ...
})

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

L'objet route cible à saisir

L'itinéraire que quitte la navigation actuelle

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.

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

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.

(2.4.0+) Si le paramètre passé à next est une instance d'Error, 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.

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles connexes :

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!