在使用路由之前，我有以下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方法从Dashboard组件传递给它的子组件？
更新：我不知道为什么我没有收到关于这个问题的任何回复，尽管这在其他框架中是一项常见而琐碎的任务，例如在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>
);
}
在使用Vue路由器一小段时间后，我得出结论，这不是一个限制，更像是一个设计决策：
-
React router：更像是一个条件渲染器，例如，从父组件内部，根据当前路径，渲染相应的子组件。
-
Vue路由器：更像是一种布线解决方案。
我还必须说：使用Vue路由器可以实现与React路由器类似的行为。这是通过将路由器的currentRoute属性与v-if指令相结合来实现的，后者可以从DOM中真正插入/删除组件(而不是像v-show那样使用css隐藏它(。
最后：分离路由配置是有利的，因为它产生了更多的模块化项目和更好的SPA。当然，这种分离可以在Vue路由器和React路由器中完成(请在此处查找React路由器(。