使用嵌套路由渲染组件时出现的问题vue.js

在使用路由之前,我有以下几点 Dashboard 组件:

<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>

我想把路线分开——一条用于注册新员工,另一条用于列出所有员工,所以我首先做的是更新上面的模板:

<template>
  <div>
    <router-view/>
  </div>
</template>

然后我定义了一个路由器对象:

export default new Router({
    mode: 'history',
    routes: [
        {
            path: "/dashboard",
            name: "dashboard",
            component: Dashboard,
            children: [
                {
                    path: 'add-employee',
                    component: RegistrationForm, 
                },
                {
                    path: 'list-employees',
                    component: EmployeeTable, 
                }
            ]
        }
    ]
});

我的问题是如何通过 employees 状态变量和 deleteEmployee , addEmployee 方法从 仪表板 组件到其子组件?

更新: 我不知道为什么我没有收到关于这个问题的任何回复,尽管这在其他框架中是一项常见而琐碎的任务,例如 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>
  );
}