Vue路由器：如何将数据传递到默认/初始路由

Question

我有一个这样设置的vue路由器配置：

[
    {
        name: 'home',
        path: '/',
        component: HomeComponent,
        props: true,
    },

    {
        name: 'detail',
        path: '/detail/:id',
        component: DetailComponent,
        props: true,
    }
]

包含此配置的应用执行以下操作：

1. 查询对象Foo的API
2. 显示带有来自Foo的一些信息的标题
3. 使用来自Foo的更多信息以及用户可以单击以访问详细路线的Bar项列表（包含在Foo中，呈现默认（“家庭”）路线）。>

问题是，如何在第一次加载时将Foo数据传递到本地路由？由于API是应用程序组件的一部分（例如this.api-不是全局变量），因此我无法在路由器配置中硬编码home的props。而且由于无法在beforeRouteEnter中引用此内容，因此在路由到首页之前，无法使用this.api执行请求。

我尝试过：

1. 通过<router-view :foo="myFoo" />传递Foo-完全没有效果。
2. 一旦加载Foo，就通过this.$router.push()或this.$router.replace()重新路由到家。即使使用$forceUpdate，这同样无效。

我考虑过：

1. 通过应用程序的next()导航防护器中的beforeRouteLeave()传递数据。这充其量使我觉得很脆弱，因为我将不得不考虑获得foo prop的每条特定路线。
2. 涉及秘密隐藏路线和其他魔法的任何恐怖骇客。

[我也怀疑我在使用任何深层链接时都会遇到相同的问题，因为在将应用程序交给每个路由组件之前，该应用程序还必须获取一个foo。

所以如何在页面加载时通过道具将顶级应用程序中的数据传递给任何给定的路由？

我有一个vue路由器配置，如下所示：[{{名称：'home'，路径：'/'，组件：HomeComponent，道具：true，}，{名称：'detail'，路径：'...

Answer 1

尚不清楚您如何精确地获得Foo对象，但是假设您将其放入mounted()中的App.vue挂钩中，则可以通过Vuex存储将其发送到Home组件中：