I am facing a dilemma with the nested router setup in my Vue app.
Here is a snippet from my router/index.js:
{
path: "/parent",
name: "Parent",
component: () =>
import(/* webpackChunkName: "parent" */ "../views/Parent.vue"),
children: [{
path: ':id',
name: 'ChildOne',
components: {
nestedview: () =>
import(/* webpackChunkName: "child-one" */ "../views/ChildOne.vue"),
}
},
{
path: "child-two",
name: "ChildTwo",
components: {
nestedview: () =>
import(/* webpackChunkName: "child-two" */ "../views/ChildTwo.vue"),
}
}]
},
In the Parent component template (using pug syntax):
router-view(
name="nestedview",
:functionOne="functionOne",
:functionTwo="functionTwo",
:functionThree="functionThree",
)
The issue arises when I need to pass specific functions as props to Child components. While it works fine for ChildOne, where all three functions are passed correctly, in ChildTwo only functionOne is received properly while the other two show up as strange parameters in the source code.
My question is, how can I ensure that different data is passed as props from the Parent component to these Child components rendered through the nested router mechanism?