How to pass state and events handlers as props to children components with Vue.js's Router? - vue.js

Question

Before using routing, I had the following Dashboard component:
<template>
<div>
<RegistrationForm v-on:add-employee="addEmployee" />
<EmployeeTable
v-bind:employees="employees"
v-on:delete-employee="deleteEmployee"
/>
</div>
</template>
<script>
...
export default {
components: {
EmployeeTable,
RegistrationForm
},
data() {
return {
employees: []
};
},
methods:{
deleteEmployee() {...}
addEmployee() {...}
}
}
</script>
I want to have to separate routes one for registering a new employee and one for listing all employees, so what I did first is updating the above template:
<template>
<div>
<router-view/>
</div>
</template>
Then I defined a router object:
export default new Router({
mode: 'history',
routes: [
{
path: "/dashboard",
name: "dashboard",
component: Dashboard,
children: [
{
path: 'add-employee',
component: RegistrationForm,
},
{
path: 'list-employees',
component: EmployeeTable,
}
]
}
]
});
My question is how to pass the employees state variable and deleteEmployee, addEmployee methods from the Dashboard component to its children components?
Update:
I do not know why I did not receive any response on this question, although this is a common and trivial task to do in other frameworks, for instance in React:
...
export default function BasicExample() {
const [x, setX] = useState("World");
return (
<Router>
<div>
<ul>
<li>
<Link to="/">Home</Link>
</li>
</ul>
<Switch>
<Route exact path="/">
<Home x={x}/>
</Route>
</Switch>
</div>
</Router>
);
}
function Home({x}) {
return (
<div>
<h2>Hello {x}</h2>
</div>
);
}

Answer 1

After using Vue-router for a short period of time, I concluded that this is not a limitation, but more like a design decision:
React-router: is more like a condional renderer, e.i from within the parent component and based on the current path, render the apporopriate child.
Vue-router: is more like a wiring solution.
Also I have to say: a similar behavior to React-router can be achieved using Vue-router. This by combining the router's currentRoute property with the v-if directive, which truly insert/remove a component from the DOM (not hiding it using css as v-show do).
Finally: seprating routes configuration is advantegeous, as it yield more modular project and better SPA. Of-course this separation can be done in both Vue-router and React-router (look here for React-router).