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

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

然而，我最近开始使用vue路由器，我的根vue元素只包含一个“路由器视图”组件，它控制向用户提供的子组件

下面是我的根元素的外观（我正在使用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调用的子元素是一种更好的方法，Vuex是一个很好的工具，但是，如果您试图将一些基本数据（如记录id）传递给子组件，您应该查看路由道具

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

// child component
props: ['id']

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

如您所见，

：id

随后被传递给子组件

id

prop

---

随着应用程序复杂性的增加，vuex（或您选择的状态管理器）将是一个更适合使用的工具。当你对它感到满意并学会一些非常好的技巧时，你会发现你错过了什么：）。

谢谢你这么快就回来了。由于我希望传递对路由不特定的变量，所以我不确定这是适合我的特定情况的最佳方法。例如，我的几个子组件对本地/生产服务器进行API调用（取决于节点环境），我发现自己多次复制“if”语句逻辑。因此，我认为在根元素声明一个“服务器”变量，然后将其传递给需要它的子元素以进行API调用，这是一种更好的方法。依我看，这是使用状态管理系统的另一个原因。原因如下：我使用vuex

actions

进行api调用。每个模块都有典型的CRUD路由，以及定义并包装在操作中的任何特定路由。i、 e.axios发出api请求的动作中名为fetchUser的动作。响应存储在状态中，并且我的子组件已计算（使用MapGetter）以在收到响应时作出反应。如果我需要在api调用之前设置数据，父组件simple会在存储中设置它。你能给出一个你拥有的特定用例的例子吗？另一个想法，也许动态组件在你的用例中会很有用。为每种情况创建一个特定的组件，并根据需要调用的服务器实例化相应的组件。我认为这是正确的选择。正如我所说，随着你的应用程序的发展，你对vuex的熟悉度也会越来越高，这似乎是一件不需要动脑筋的事情。下面是一个与商店一起使用的axios示例。alligator.io有一些很好的教程。我最近也发现了这个回购协议。