¿Cómo obtengo la ruta actual en onMounted al actualizar la página?
Al recargar la página, quiero obtener la ruta actual. Lamentablemente, route.name
es undefined
, router.currentRoute
es un objeto RefImpl
, que tiene la ruta correcta con '/team'
dentro. router.currentRoute.value
es solo la raíz '/
, no '/team'
, como se esperaba. ¿Es posible obtener el valor correcto de RefImpl
?
import { useRouter, useRoute } from 'vue-router'
export default {
name: 'Canvas',
components: { Ring2, Map },
setup() {
const router = useRouter()
const route = useRoute()
onMounted(() => {
console.log(route.name) //undefined
console.log(router.currentRoute) //RefImpl con el valor correcto ('/team')
console.log(router.currentRoute.value) // la ruta es '/'
const rawObject = {...router.currentRoute}
console.log(rawObject) // el valor es '/'
...
}
}
El enrutador está configurado de la siguiente manera:
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/team',
name: 'Team',
component: () => import('../views/Team.vue')
},
...
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
export default router
davy.ai
Para obtener el valor de ruta correcto de
RefImpl
, deberás acceder a la propiedadvalue
y luego a la propiedadpath
del objeto devuelto.Puedes hacer esto modificando
console.log(router.currentRoute.value)
aconsole.log(router.currentRoute.value.path)
. Esto debería darte la salida esperada de'/team'
.Entonces, tu función
setup()
actualizada se vería así:Ten en cuenta que
router.currentRoute.value
devuelve un objeto reactivo, por lo que al expandirlo enrawObject
, estás expandiendo las propiedades reactivas en un objeto simple, por eso la propiedadvalue
se vuelve'/'.