Redirection et alias

Redirection

Les redirections peuvent aussi être faites depuis la configuration de routes. Pour rediriger /a vers /b :

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

La redirection peut également être effectuée en ciblant une route nommée :

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

Ou on peut même utiliser une fonction pour les redirections dynamiques :

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: to => {
      // la fonction reçoit la route cible en tant qu'argument
      // retournez le chemin vers la nouvelle route ici.
    }}
  ]
})

Notez que les intercepteurs de navigation ne sont pas appliqués sur les routes d'où à lieu la redirection mais uniquement sur les routes cibles. Dans l'exemple ci-dessous, ajouter une interception beforeEnter à la route /a n'aura aucun effet.

Pour d'autres utilisations avancées, jetez un œil à cet exemple (opens new window).

Alias

Une redirection signifie que si l'utilisateur visite /a, l'URL va être remplacé par /b et concordé avec /b. Mais qu'est-ce qu'un alias ?

Un alias de /a en tant que /b signifie que lorsque l'utilisateur va visiter /b, l'URL va rester /b, mais la concordance va se faire comme si l'utilisateur visitait /a.

La phase du dessus peut être exprimée dans la configuration de la route de la manière suivante :

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

Un alias vous donne la liberté d'associer une structure d'interface utilisateur à un URL arbitraire, au lieu d'être contraint par une configuration de structure.

Pour d'autres utilisations avancées, jetez un œil à cet exemple (opens new window).