I have a form with different steps that all share the same header structure.
The only difference in the header within the different steps is wording in that header which changes along the steps.
I am searching for a way to do this:
In my vue router :
path: '/form',
name: 'Form',
component: Form,
children: [
{
path: 'step1',
component: FormStep1,
propsForParent: {
title: "myTitle In Header In Form Component"
},
},
{
path: 'step2',
component: FormStep2,
propsForParent: {
title: "myTitle is different In Header In Form Component"
},
}
]
Therefore when the route is form/step1 I would like my form component to receive the title props set in my children configuration as described above and so on.
I would like to avoid managing that in my parent component and also avoid my child to communicate this information with an event for instance to my parent component or using vuex. I am searching for something nice directly in vue router.
Any idea?