My big doubt is regarding the passage of props. When I call a component inside another, I can pass props to it as if they were HTML attributes. But if the component to which I am going to pass said prop is a view component (that is, I do not call it as
<MiComponente :prop="miProp" />
, but usingrouter
) I do not know how a prop would be passed in this case. This is what I tried and it doesn't work:
I have a route that uses the componentCharacter.vue
{
path: '/character/:character',
name: 'Character',
props: true,
component: () => import(/* webpackChunkName: "character" */ '../views/Character.vue')
}
And in another component Card.vue
, (in which I have an object in prop.character
) I have a function that does the following:
router.push({
name: "Character",
params: {
character: { ...props.character },
},
});
My intention is that when the name route is loaded Character
, it has in its props
the value that comes from the component Card.vue
(props.character)
To do this, in the view component Character.vue
I have
props: {
character: {
type: Object,
required: true,
},
},
When executing the function
Card.vue
, I am redirected to a routehttp://localhost:8080/#/character/[object%20Object]
, that is, I am passing a string instead of an object. Could someone tell me what is the correct way to receive the object in the viewCharacter.vue
? Thank you very much