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

Question

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

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

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

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

查询 API 以获得 object Foo
显示 header 以及来自 Foo
呈现默认 ("home") 路线，其中包含来自 Foo 的更多信息和用户可以单击以访问详细路线的 Bar 项目列表（包含在 Foo 中）。

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

我试过：

通过 <router-view :foo="myFoo" /> 传递 Foo - 这没有任何效果。
Re-routing 加载 Foo 后通过 this.$router.push() 或 this.$router.replace() 返回主页。这同样没有效果，即使 $forceUpdate.

我考虑过：

通过应用 beforeRouteLeave() 导航守卫中的 next() 传递数据。这充其量让我觉得很脆弱，因为我将不得不考虑每条获得 foo 道具的特定路线。
涉及秘密隐藏路线和其他魔法的任何数量的可怕黑客攻击。

我还怀疑我将面临与任何深层链接相同的问题，因为应用程序还必须在将其传递给 per-route 组件之前获取 foo。

所以。如何在页面加载时通过道具将数据从 top-level 应用程序传递到任何给定的路由？

Answer 1

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

方法一

App.vue

mounted () {
  this.foo = getFoo()
},
computed: {
  foo: {
    get () {
      return this.$store.state.foo
    },
    set (value) {
      // commit or dispatch the object to store
    }
  }
}

Home.vue

<div>{{foo}}</div>

computed: {
  foo () {
    return this.$store.state.foo
  }
}

方法 2 - 使用 eventBus

创建名为 eventBus.js 的文件：

eventBus.js

import Vue from 'vue'
export const eventBus = new Vue()

在你的 main.js 中导入创建的事件总线，如果你想让它在全球可用，你可以在其中导入 Vue 并将其添加到 Vue 原型中：

Main.js

import { eventBus } from './eventBus'

Vue.prototype.$eventBus = eventBus

App.vue

mounted () {
  this.foo = getFoo()
  // Send foo via event bus
  this.$eventBus.$emit('transferFoo', this.foo)
}

Home.vue

<div>{{foo}}</div>

data () {
  return {
    foo: {}
  }
},
mounted () {
  this.$eventBus.$on('transferFoo', data => {
    this.foo = data
  })
}

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

Vue router: how to pass data to default/ initial route

api

default

vue.js

vue-router

方法一

App.vue

Home.vue

方法 2 - 使用 eventBus

eventBus.js

Main.js

App.vue

Home.vue