es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿Cómo obtengo la ruta actual en onMounted al actualizar la página?

02 Aug, 2023 Programación

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
Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para obtener el valor de ruta correcto de RefImpl, deberás acceder a la propiedad value y luego a la propiedad path del objeto devuelto.

    Puedes hacer esto modificando console.log(router.currentRoute.value) a console.log(router.currentRoute.value.path). Esto debería darte la salida esperada de '/team'.

    Entonces, tu función setup() actualizada se vería así:

    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.path) // la ruta es '/team'
    const rawObject = {...router.currentRoute}
    console.log(rawObject) // value es '/'
    ...

    Ten en cuenta que router.currentRoute.value devuelve un objeto reactivo, por lo que al expandirlo en rawObject, estás expandiendo las propiedades reactivas en un objeto simple, por eso la propiedad value se vuelve '/'.

Comments are closed.