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.

  • es.davy.ai/
  • Programación /
  • Cómo establecer un componente secundario en vue.js para que se muestre como “predeterminado”.

Cómo establecer un componente secundario en vue.js para que se muestre como “predeterminado”.

13 Jul, 2023 Programación

Tengo un proyecto hecho en Vue.js 3, usando vue-router con una configuración como esta:

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/philosophy',
    component: philosophy,
    children: [
      {
        path: '/',
        component: card1
      },
      {
        path: '/card2',
        component: card2
      },
      {
        path: '/card3',
        component: card3
      },
      {
        path: '/card4',
        component: card4
      }
    ]
  }
]

Cada tarjeta se carga mediante la directiva router-link, dentro de un elemento <div> donde hay una router-view.

La ruta de card1 es "/" para que la tarjeta 1 se cargue solo cuando el usuario accede a la ruta “/philosophy”. Esto funciona perfectamente en Vue 2, pero no en Vue 3, donde el componente ya no se carga.
¿Existe alguna forma en Vue 3 de hacer que el componente card1 se cargue por defecto?

Gracias de antemano por la ayuda.

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    En Vue 3, se cambió el comportamiento del componente router-view, ya que dejó de representar automáticamente el primer componente de ruta hijo que coincide. En cambio, solo representa el componente para la ruta exacta que coincide con la URL actual.

    Para hacer que el componente card1 se cargue de forma predeterminada, puedes agregar una propiedad redirect a la ruta /philosophy, de esta manera:

    const routes = [
  {
    path: '/',
    name: "home",
    component: Home
  },
  {
    path: '/philosophy',
    component: philosophy,
    redirect: '/philosophy/card1', // Agrega esta propiedad
    children: [
      {
        path: '/',
        redirect: 'card1' // Elimina la propiedad del componente para card1
      },
      {
        path: '/card1',
        component: card1
      },
      {
        path: '/card2',
        component: card2
      },
      {
        path: '/card3',
        component: card3
      },
      {
        path: '/card4',
        component: card4
      }
    ]
  }
]

    Con esta configuración, cuando el usuario navega a /philosophy, se redirigirá automáticamente a /philosophy/card1, y el componente card1 se cargará de forma predeterminada.

Comments are closed.