Al volver a cargar la página, quiero obtener la ruta actual. Lamentablemente, route.name no está undefined , router.currentRoute es un objeto RefImpl , que tiene la ruta correcta con '/team' dentro. router.currentRoute.value es solo root '/' , 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 with correct value ('/team') console.log(router.currentRoute.value) // route is '/' const rawObject = {...router.currentRoute} console.log(rawObject) // value is '/' ...El enrutador está configurado así:
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 routerEsto sucede porque el enrutador aún no ha resuelto por completo la navegación inicial cuando actualiza la página, por lo que la route se refiere al valor predeterminado ( / ) inicialmente en onMounted .
isReady() de Vue Router devuelve una Promise que se resuelve cuando el enrutador ha completado la navegación inicial, por lo que su gancho onMounted puede await esa Promise antes de intentar leer route.path :
import { useRoute, useRouter } from 'vue-router' import { onMounted } from 'vue' export default { setup() { const route = useRoute() const router = useRouter() onMounted(async () => { await router.isReady() 👈 console.log('route.path', route.path) }) }, }Intente usar la función componible useRoute :
import { useRoute } from 'vue-router' import { computed } from 'vue' setup() { const route = useRoute(); const path = computed(() => route.path) }