Navegación programática y useRouter
router.push(), router.replace(), router.go(), y los composables useRouter() y useRoute()
Navegación programática y useRouter es una lección gratuita de Vue Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Vue Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Vue Academy incluye 4 lecciones en total.
Navegar desde el código
Además de RouterLink, a menudo necesita navegar desde JavaScript, por ejemplo, después de enviar un formulario o iniciar sesión. El composable useRouter le proporciona la instancia del router para hacerlo.
Obtener el router
Llame a useRouter() dentro de <script setup>. El objeto devuelto expone push, replace, go y otros métodos.
import { useRouter } from 'vue-router'
const router = useRouter()Navegar con push
router.push añade una entrada a la pila del historial, como al hacer clic en un enlace. La forma más sencilla recibe una cadena de ruta.
router.push('/dashboard')Usar push con un objeto de ruta
También puede pasar un objeto con name, params y query. Las rutas con nombre evitan escribir las rutas directamente en el código.
router.push({
name: 'user',
params: { id: 42 },
query: { tab: 'profile' }
})Replace: sin entrada en el historial
router.replace navega sin añadir una entrada al historial, por lo que el botón de atrás la omite. Úselo después de iniciar sesión para que los usuarios no puedan volver a la página de inicio de sesión.
router.replace('/dashboard')Retroceder y avanzar
router.go(n) recorre el historial avanzando o retrocediendo n pasos. router.go(-1) retrocede una página; router.go(1) avanza.
function goBack() {
router.go(-1)
}Después de una acción asíncrona
Un flujo habitual consiste en enviar un formulario, esperar el resultado y después navegar. push devuelve una Promise que puede esperar hasta que se complete.
async function login() {
await auth.signIn(form)
router.push('/dashboard')
}Leer la ruta actual
Para leer los parámetros y la consulta de la ruta actual, use el composable useRoute. No lo confunda con useRouter: useRoute es la ruta y useRouter es el navegador.
import { useRoute } from 'vue-router'
const route = useRoute()Acceder a los parámetros
Lea los segmentos dinámicos mediante route.params. Para una ruta /user/:id, el id se encuentra en route.params.id.
const userId = route.params.idAcceder a las cadenas de consulta
Lea la cadena de consulta mediante route.query. Para ?tab=profile, use route.query.tab.
const tab = route.query.tabReaccionar a cambios de parámetros
Como route es reactiva, obsérvela con watch para responder cuando cambien los parámetros mientras permanece en el mismo componente.
import { watch } from 'vue'
watch(() => route.params.id, (newId) => {
loadUser(newId)
})Comprobación rápida
Ponga a prueba sus conocimientos sobre la navegación programática.
Resumen
Ha aprendido sobre navegación programática:
- useRouter() proporciona push, replace y go.
- push añade una entrada al historial; replace no lo hace; go(-1) retrocede.
- push acepta una cadena de ruta o un objeto { name, params, query }.
- useRoute() lee los parámetros y la consulta actuales, y es reactivo.
Preguntas frecuentes
¿La lección «Navegación programática y useRouter» es gratis?
Sí — el texto completo de «Navegación programática y useRouter» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Vue Academy, actualiza a CoddyKit PRO. El curso de Vue Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Navegación programática y useRouter»?
router.push(), router.replace(), router.go(), y los composables useRouter() y useRoute() Practicas Vue Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Vue Academy?
No se requiere experiencia previa. Vue Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.
¿Cuánto tiempo toma la lección «Navegación programática y useRouter»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Vue Academy?
Sí. Cada lección de Vue Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Campos meta de rutas y tipado
- Transiciones y animaciones de rutas
- Configuración del comportamiento de desplazamiento
- Navegación programática y useRouter