您可以使用路由器视图将道具绑定到子组件吗？ (vue)

Question

我有三个依赖于父级数据的视图，但我不想显示来自多个子级的视图。

家长

获取 API 并操作数据。将其作为对象数组存储在 data() 对象中。 容器的作用是在 created() 上获取 api 并充当视图的父级。 数据与儿童共享。并且标头作为组件导入。子组件在路由器视图中呈现。 数据存储在对象数组中，userData[]

子组件 1 .

路径：/#/用户

需要userData[]，吐出用户的内容。你可以点击一个用户，然后你去childcomponent2

子组件 2。

路径：/#/用户：id 显示特定的用户数据。需要 userData[] 对象数组。

子组件 3.

路径：/#/user:id/list/:id

显示用户拥有的列表的特定数据，需要 userData[] 来获取用户的名称和信息，并进行新的 API 调用以获取列表项

或者什么是最好的架构？

<template>
  <div>
    <UserView :listdata="item" v-if="bool" />
<ListView :listdata="item" v-if="bool" />
    <router-view></router-view>
  </div>
</template>

我想到的另一件事是设置一个 v-if="boolean" 来显示不同的视图它不可能让孩子使用道具你只需使用路由器视图并将它们设置为那里的孩子，

export default [
  {
    path: "/",
    component: TheContainer,
    children: [{ path: "/user", component: UserView }, 
    { path: "/user/:id", component: ListView }],
  },
];

Answer 1

您可以将 props 绑定到 <router-view>，该 <router-view> 将转发到它呈现的子组件。

<router-view :userdata="whatever">

否则对于更复杂的任务，您可能需要全局共享状态（例如 Vuex）。