Typically, when I need a variable that multiple child components should access, I usually store it in the data object of my root Vue element and then pass it down to child components through properties.
However, since I've started using vue-router, my root Vue element now only contains a "router-view" component, which dictates which child component is displayed to the user.
Below is my current root element structure (created using vue-cli):
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'app'
}
</script>
<style lang="scss">
</style>
Due to this setup, the traditional method of passing variables to child components through properties seems impractical now that I'm using vue router.
What is the best way to pass data from my root Vue element to child components using vue router? Is this approach even necessary to access "global" variables?
I've come across suggestions to use Vuex for state management, and while I'm open to exploring and utilizing it, it may be a bit excessive for my current requirements.
EDIT (for clarification)
Many of my child components make API calls to a local or production server (based on the node environment), leading to repeated "if-else" logic to determine the server for each API call. In order to streamline this process, I thought it would be more efficient to declare a "server" variable at the root element and pass it down to the child components needing to make API calls.