En Vue Router 4, il est possible d'effectuer une navigation par programmation, indépendamment des clics sur des liens. Cette approche repose principalement sur deux fonctions : push et replace.

La méthode router.push

La fonction router.push permet de naviguer vers une URL différente ou d'ajouter des paramètres de requête à l'URL courante. Voici plusieurs cas d'utilisation :

// Navigation par chemin simple
router('/admin-panel')

// Navigation via un objet de configuration
router({ path: '/admin-panel' })

// Ajout de paramètres de requête
router({ 
  path: '/signup', 
  query: { subscription: 'premium' }
})

Note : Si le chemin spécifié correspond au chemin actuel, seuls les paramètres de route seront mis à jour.

La méthode router.replace

Le fonctionnement de router.replace est identique à router.push, à ceci près qu'elle remplace l'entrée actuelle dans l'historique de navigation sans en ajouter une nouvelle.

// Redirection sans ajout dans l'historique
router('/admin-panel')

La méthode router.go

La méthode router.go permet de naviguer dans l'historique de navigation d'un nombre spécifié d'étapes, de manière similaire à window.history.go(n).

// Avancer d'une entrée d'historique
router(1)

// Reculer d'une entrée d'historique
router(-1)

// Avancer de trois étapes
router(3)

// Tentative de navigation au-delà des limites de l'historique
router(-150)
router(150)

Le paramètre attendu est un entier indiquant le nombre d'étapes à parcourir dans l'historique. Par exemple, go(1) est équivalent à forward(), tandis que go(-1) correspond à back().

Cas pratique : Redirection après authentification

Considérons un scénario d'authentification utilisateur. Après la connexion, nous souhaitons rediriger l'utilisateur vers la page qu'il tentait d'accéder. Nous pouvons définir un champ requiresAuth dans les méta-données des routes et le vérifier dans un garde de navigation global :

const routeDefinitions = [
  { 
    path: '/account/:identifier', 
    component: UserProfile, 
    meta: { requiresAuthentication: true }
  },
  // Autres définitions de routes...
]

router.beforeEach((destination, origin, proceed) => {
  const needsAuth = destination.matched.some(
    record => record.meta.requiresAuthentication
  )
  
  if (needsAuth && !checkUserSession()) {
    proceed({
      path: '/signin',
      query: { 
        requestedRoute: destination.fullPath 
      }
    })
  } else {
    proceed()
  }
})

Dans le composant de connexion, nous pouvons alors utiliser la navigation programmatique pour rediriegr l'utilisateur :

// Suite à la connexion réussie
const targetPath = this.$route.query.requestedRoute || '/dashboard'
this.$router(targetPath)