VueJS：如何通过router-view将根元素数据传递给子组件？

刚好遇到过类似的场景，给你几个实用的方案，完全不用上Vuex，而且都很适合你的需求：

1. 最省心的方式：把变量挂载到Vue原型上 #

你的server是根据环境确定的固定值，直接挂载到Vue原型上，所有组件都能直接访问，不用繁琐的props传递：

在项目入口文件main.js里添加：

import Vue from 'vue'
import App from './App.vue'
import router from './router'

// 根据Node环境自动设置服务器地址
Vue.prototype.$server = process.env.NODE_ENV === 'production' 
  ? 'https://你的生产服务器地址/api' 
  : 'http://localhost:3000/api'

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

之后在任意子组件里，直接用this.$server就能拿到地址，比如调用API时：

// 子组件里的API调用示例
axios.get(`${this.$server}/user/info`)

2. Vue CLI官方推荐：用环境变量配置 #

其实还有更规范的做法——Vue CLI支持通过.env文件管理环境变量，连判断逻辑都省了：

• 在项目根目录创建.env.development文件（开发环境）：

VUE_APP_SERVER=http://localhost:3000/api

• 创建.env.production文件（生产环境）：

VUE_APP_SERVER=https://你的生产服务器地址/api

之后在任何组件里，直接通过process.env.VUE_APP_SERVER访问，Vue CLI会自动根据当前环境加载对应的配置，完全不用自己写if-else！

3. 路由props传递（适合动态场景） #

如果你的server是需要动态变化的（不过你的场景里应该是固定的），也可以通过根组件+路由props传递：

首先修改App.vue，把server放到data里：

<template>
  <div id="app">
    <!-- 把server传给router-view -->
    <router-view :server="server"></router-view>
  </div>
</template>
<script>
export default {
  name: 'app',
  data() {
    return {
      server: process.env.NODE_ENV === 'production' 
        ? 'https://你的生产服务器地址/api' 
        : 'http://localhost:3000/api'
    }
  }
}
</script>

然后在路由配置文件router/index.js里，给需要接收参数的路由开启props: true：

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home,
      props: true // 开启后，子组件能通过props接收server
    }
  ]
})

最后在子组件里通过props接收：

<script>
export default {
  props: ['server'],
  mounted() {
    console.log('服务器地址：', this.server)
  }
}
</script>

不过这个方法需要给每个路由都配置props: true，如果路由多的话比较麻烦，不如前两种方便。

关于“全局变量方式是否合适”的问题 #

对于你这种环境相关的固定常量，用原型挂载或者环境变量完全合适！Vuex确实是大材小用——Vuex的核心是管理跨组件共享且会动态变化的状态（比如用户登录状态、购物车数据），而你的server是项目启动时就确定的固定值，完全没必要引入Vuex增加项目复杂度。

内容的提问来源于stack exchange，提问作者ptk