VueJS：通过路由器视图将数据从根元素传递到子组件

Question

一般来说，当我有一个多个子组件应该能够访问的变量时，我会将它们存储在我的根 Vue 元素的数据对象中，然后通过属性将它们传递给子组件。

但是，我最近开始使用 vue-router，而我的根 vue 元素仅包含一个“router-view”组件，该组件控制向用户提供哪些子组件。

下面是我的根元素的样子（我使用的是 vue-cli）：

<template>
  <div id="app">
      <router-view></router-view>
  </div>
</template>

<script>
    export default {
        name: 'app'
    }
</script>

<style lang="scss">

</style>

因此，我在使用 vue 路由器之前使用的通过属性将变量传递给子组件的方法似乎不再可行。

我应该如何通过 vue 路由器将数据从我的根 Vue 元素传递到我的子组件？我是否应该使用这种方法来实现访问“全局”变量的目标？

我已经阅读了几个参考使用 Vuex 进行状态管理的线程，虽然我不反对学习和使用它 - 对于我在这个阶段想要实现的目标来说感觉有点矫枉过正。

编辑（澄清问题）

我的几个子组件对本地/生产服务器进行 API 调用（取决于节点环境），我发现自己多次复制“if-else”逻辑以确定组件应该在哪个服务器进行 API 调用到。所以我认为在根元素声明一个“服务器”变量然后将其传递给需要进行 API 调用的子元素会是一种更好的方法

Answer 1

Vuex 是一个很棒的工具，但是，如果您尝试将一些基本数据（例如记录 ID）传递给子组件，则应该查看路由道具。

https://router.vuejs.org/en/essentials/passing-props.html

使用路由路由道具，您可以以正常方式在子组件中声明道具。但是，必须与路由属性命名相同。

// child component
props: ['id']

// route definition
{ path: '/item/:id', component: Item, props: true },

如您所见，:id 然后被传递给子组件 id 属性。

随着您的应用程序变得越来越复杂，vuex（或您选择的状态管理器）将是一个更适合使用的工具。当你适应它并学习一些非常好的技巧时，你会发现你错过了什么:)。