CDN router - passing data/functions

Hello,
I’m trying to build a vue app (beginner) without using npm (CDN) and I’d like to know how to pass data between components (defined in routes). So far my app looks something like this:

  • index.html
<head><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@3.0.1/dist/vue-router.js"></script></head>
<body>
<main id="app">
<router-link v-for="route in routes" :to="{ name: route.name }" :key="route.id">
<li>{{ route.name }}</li></router-link>
 <section>
    <router-view></router-view>
 </section>
</main>
<script src="js/route_about.js"></script>
<script src="js/route_main.js"></script>
...(more routes follow)...
<script src="js/app.js"></script>
</body>
  • app.js
//env variables
const ENV_VAR = { "storage": null, languages: ["en", "de"..] }
//components defined in js dir 
const routes = [    
{ id: 0, path: '/main', name: "main", component: Route0 },
{ id: 1, path: '/about', name: "about", component: Route1 },
...
]
const router = new VueRouter({ routes: routes })

var app = new Vue({
    el: '#app',
    router: router,
    data: {
        routes: routes,
        storage: ENV_VAR.storage,
        ... 
    },
    mounted() {
        // get config data from local storage or go to main w/ welcome msg
        if (window.localStorage.length) this.storage = window.localStorage.getItem(storage)
        else router.push({ name: 'main', params: { first_time: true, languages: ENV_VAR.languages } })
    }
})
  • route_main.js
const Route0 = {
template: `<section>
    <header>
        <h1>Main page</h1>
    </header>
    <header v-if="params.first_time">
        <h2>Hello there!</h2>
    </header>
    <div style="display: flex">
        <h3 style="flex: auto">Choose your language: </h3>
        <p style="flex: auto; display:inline-flex">
            <button v-for="language in params.languages" style="flex: auto">{{ language }}</button>
        </p>
    </div>
</section>`,
data(){
return {  params: this.$route.params  }
}
}

This gets me close to what is expected, however I’m faced with the following issues:

  • how do I pass the selected language (on main page) back to the app.js and set it in local storage
  • suppose the language is then set in local storage, how do I inform all the components (routes) about it
  • user visits /main page again - either directly or not, the main page should be made aware of the chosen language and color the selected button differently (does vue.js provide an easy way to combine both v-for and v-if in the same button tag) as well as have access to ENV_VAR.storage
  • user goes straight to /about, app.js still needs to run to check if first time using the app or load the config from local storage (should app.js always run before proceeding to the desired route, given that the global parameters need to be passed to individual routes somehow?)

Now I’m aware that props exist and solve some of the issues I’m faced with, however I don’t see a way of how to make use of them - all of the vue.js tutorials seem to put a tag into the HTML and use that tag as a placeholder for data, which I don’t have (are the tags actually hidden behind router-links?)