Navigation programmatique et useRouter
Composables router.push(), router.replace(), router.go(), useRouter() et useRoute()
Navigation programmatique et useRouter est une leçon Vue Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Vue Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Vue Academy comprend 4 leçons au total.
Naviguer depuis le code
En plus de RouterLink, vous devez souvent naviguer depuis JavaScript, après l’envoi d’un formulaire ou une connexion. Le composable useRouter vous fournit l’instance du routeur nécessaire.
Obtenir le routeur
Appelez useRouter() dans <script setup>. L’objet renvoyé expose push, replace, go et d’autres fonctionnalités.
import { useRouter } from 'vue-router'
const router = useRouter()Naviguer avec push
router.push ajoute une entrée à l’historique, comme lorsque vous cliquez sur un lien. La forme la plus simple reçoit une chaîne de chemin.
router.push('/dashboard')Utiliser push avec un objet de route
Vous pouvez également transmettre un objet contenant name, params et query. Les routes nommées évitent d’inscrire les chemins en dur.
router.push({
name: 'user',
params: { id: 42 },
query: { tab: 'profile' }
})Replace : aucune entrée dans l’historique
router.replace navigue sans ajouter d’entrée à l’historique, de sorte que le bouton Précédent l’ignore. Utilisez-le après la connexion afin que les utilisateurs ne puissent pas revenir à la page de connexion.
router.replace('/dashboard')Revenir en arrière et avancer
router.go(n) parcourt l’historique de n étapes. router.go(-1) revient d’une page ; router.go(1) avance d’une page.
function goBack() {
router.go(-1)
}Après une action asynchrone
Un déroulement courant consiste à envoyer un formulaire, à attendre le résultat, puis à naviguer. push renvoie une Promise que vous pouvez attendre jusqu’à la fin de l’opération.
async function login() {
await auth.signIn(form)
router.push('/dashboard')
}Lire la route actuelle
Pour lire les paramètres et la requête de la route actuelle, utilisez le composable useRoute. Ne le confondez pas avec useRouter : useRoute représente la route, tandis que useRouter est le navigateur.
import { useRoute } from 'vue-router'
const route = useRoute()Accéder aux paramètres
Lisez les segments dynamiques via route.params. Pour une route /user/:id, l’identifiant se trouve dans route.params.id.
const userId = route.params.idAccéder aux chaînes de requête
Lisez la chaîne de requête via route.query. Pour ?tab=profile, utilisez route.query.tab.
const tab = route.query.tabRéagir aux changements de paramètres
Comme route est réactive, observez-la pour réagir lorsque les paramètres changent tout en restant sur le même composant.
import { watch } from 'vue'
watch(() => route.params.id, (newId) => {
loadUser(newId)
})Vérification rapide
Vérifiez vos connaissances sur la navigation programmatique.
Récapitulatif
Vous avez appris la navigation programmatique :
- useRouter() fournit push, replace et go.
- push ajoute une entrée à l’historique ; replace n’en ajoute pas ; go(-1) revient en arrière.
- push accepte une chaîne de chemin ou un objet contenant un nom, des paramètres et une requête.
- useRoute() lit les paramètres et la requête actuels et réagit à leurs changements.
Apprends HTML avec un tuteur IA — gratuit
Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.
- Cours
- 42
- Leçons
- 156
Questions Fréquemment Posées
La leçon « Navigation programmatique et useRouter » est-elle gratuite ?
Oui — le texte complet de « Navigation programmatique et useRouter » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Vue Academy, passe à CoddyKit PRO. Le cours Vue Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Navigation programmatique et useRouter » ?
Composables router.push(), router.replace(), router.go(), useRouter() et useRoute() Tu pratiques Vue Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Vue Academy ?
Aucune expérience préalable n'est requise. Vue Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.
Combien de temps prend la leçon « Navigation programmatique et useRouter » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Vue Academy ?
Oui. Chaque leçon Vue Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Champs meta des routes et typage
- Transitions et animations des routes
- Configuration du comportement de défilement
- Navigation programmatique et useRouter