title: VueJS: Passing data from root element to child components through router-view
body: <p>Generally, when I have a variable that several child components should be able to access, I store them in the data object of my root Vue element and subsequently pass them down to child components through properties. </p>
  
  <p>However, I've recently progressed to using vue-router and my root vue element only contains a "router-view" component, which controls what child component is being served to the user.</p>
  
  <p><strong>Below is what my root element looks like (I am using vue-cli):</strong></p>
  
  <pre><code>&lt;template&gt;
    &lt;div id="app"&gt;
        &lt;router-view&gt;&lt;/router-view&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      export default {
          name: 'app'
      }
  &lt;/script&gt;
  
  &lt;style lang="scss"&gt;
  
  &lt;/style&gt;
  </code></pre>
  
  <p>As a result, the approach of passing variables to child components through properties, which I used prior to using vue router, doesn't seem viable anymore.</p>
  
  <p><strong>How should I be passing data from my root Vue element to my child components through vue router? Should I even be using this approach to achieve my goal of accessing "global" variables?</strong> </p>
  
  <p>I've read several threads that reference using Vuex for state management and while I'm unopposed to learning and using it - it feels a little overkill for what I'm trying to achieve at this stage.</p>
  
  <p>EDIT (clarifying question)</p>
  
  <p>Several of my child components make API calls to a local / production server (depending on the node environment) and I find myself copying the “if-else” logic multiple times to determine which server the component should be making the API call to. So I thought it would be a much better approach of declaring a “server” variable at the root element and then pass it down to the child elements that need to make API calls</p>