Mi gran duda es respecto al pasaje de props. Cuando yo llamo a un componente dentro de otro, le puedo pasar props como si se trataran de atributos HTML. Pero si el componente al que le voy a pasar dicha prop es un componente de vista (es decir, no lo llamo como
<MiComponente :prop="miProp" />
, sino haciendo uso delrouter
) no se como se pasaría una prop en este caso. Esto es lo que intenté y no funciona:
Tengo una ruta que usa el componente Character.vue
{
path: '/character/:character',
name: 'Character',
props: true,
component: () => import(/* webpackChunkName: "character" */ '../views/Character.vue')
}
Y en otro componente Card.vue
, (en el cual tengo un objeto en prop.character
) tengo una función que hace lo siguiente:
router.push({
name: "Character",
params: {
character: { ...props.character },
},
});
Mi intención es que al cargarse la ruta de nombre Character
, tenga en sus props
el valor que viene del componente Card.vue
(props.character)
Para ello, en el componente de vista Character.vue
tengo
props: {
character: {
type: Object,
required: true,
},
},
Al ejecutar la función de
Card.vue
, soy redirigido a una rutahttp://localhost:8080/#/character/[object%20Object]
, es decir, estoy pasando un string en lugar de un objeto. Alguien me podría decir cual es el camino correcto para recibir el objeto en la vistaCharacter.vue
? Muchas gracias
this.$route.params.etc
. Yo a eso logro recibirlo, el problema es que no estoy recibiendo el objeto que mando cuando llamo a router.push, sino que estoy recibiendo un string"[Object Object]"
. No se si tengo un error haciendo router.push, en el router, o en ambos, pero el objeto que intento enviar, no lo recibo en mi componente de vista (Terminé resolviendo con Vuex, pero me surgió esta duda y por eso realicé la pregunta)