My application is based on the vue-router example where an all-encompassing component App has two child components New and List which are rendered in <router-view></router-view> depending on the route.
When App is mounted, it fetches some data which are available in its data structure as users (I refer to this data as this.users within App). I now need New and List to be aware of users (read-only, if it matters).
My problem is that I do not know how to either make this object global (and therefore directly available to subcomponents), or pass it as props to the components.
The router documentation mentions how to essentially do this:
When
propsis an object, this will be set as the component props as-is. Useful for when the props are static.
This is supposed to be done when defining routes as
{path: '/list', component: List, props: users}
Now, following a useful example the code above lives in a router.js (source at the bottom of this question) file which is imported in main.js and made part of the Vue instance:
import router from './router.js'
new Vue({
router,
render: h => h(App)
}).$mount('#app')
The data lives in App, the components are brought in in router.js - how can I pass it between App and List?
// router.js
import Vue from "vue"
import Router from "vue-router"
import App from './App.vue'
import List from './List.vue'
Vue.use(Router)
const routes = [
{path: '/list', component: List, props: users},
{path: '*', redirect: '/list'}
]
export default new Router({
routes: routes
})
