const router = useRouter()

Si solo necesitas la instancia del enrutador dentro de tu plantilla, usa $router:

<template>
  <button @click="$router.back()">Atrás</button>
</template>

Si tienes un directorio pages/, useRouter es idéntico en comportamiento al proporcionado por vue-router.

Manipulación Básica

• addRoute(): Añade una nueva ruta a la instancia del enrutador. Se puede proporcionar parentName para añadir la nueva ruta como hija de una ruta existente.
• removeRoute(): Elimina una ruta existente por su nombre.
• getRoutes(): Obtiene una lista completa de todos los registros de rutas.
• hasRoute(): Verifica si existe una ruta con un nombre dado.
• resolve(): Devuelve la versión normalizada de una ubicación de ruta. También incluye una propiedad href que incluye cualquier base existente.

const router = useRouter()

router.addRoute({ name: 'home', path: '/home', component: Home })
router.removeRoute('home')
router.getRoutes()
router.hasRoute('home')
router.resolve({ name: 'home' })

Basado en la API de Historial

• back(): Retrocede en el historial si es posible, igual que router.go(-1).
• forward(): Avanza en el historial si es posible, igual que router.go(1).
• go(): Avanza o retrocede a través del historial sin las restricciones jerárquicas impuestas en router.back() y router.forward().
• push(): Navega programáticamente a una nueva URL añadiendo una entrada en la pila de historial. Se recomienda usar navigateTo en su lugar.
• replace(): Navega programáticamente a una nueva URL reemplazando la entrada actual en la pila de historial de rutas. Se recomienda usar navigateTo en su lugar.

const router = useRouter()

router.back()
router.forward()
router.go(3)
router.push({ path: "/home" })
router.replace({ hash: "#bio" })

Guardias de Navegación

El composable useRouter proporciona los métodos auxiliares afterEach, beforeEach y beforeResolve que actúan como guardias de navegación.

Sin embargo, Nuxt tiene un concepto de middleware de ruta que simplifica la implementación de guardias de navegación y proporciona una mejor experiencia para el desarrollador.

Manejo de Promesas y Errores

• isReady(): Devuelve una Promesa que se resuelve cuando el enrutador ha completado la navegación inicial.
• onError: Añade un manejador de errores que se llama cada vez que ocurre un error no capturado durante la navegación.

Instancia Universal del Enrutador

Si no tienes una carpeta pages/, entonces useRouter devolverá una instancia universal del enrutador con métodos auxiliares similares, pero ten en cuenta que no todas las características pueden ser compatibles o comportarse exactamente de la misma manera que con vue-router.