Есть у меня корневой компонент vue, который отрисовывает страничку. На страничке есть еще несколько дочерних компонентов которые отображаются в зависимости от выбранных табов. Это переключение между компонентами через vue-route организовано. Задача: из корневого компонента передать параметры дочерним.
Сам компонент:
export default Vue.component('main-page', {
props : ['settings'],
mounted(){
console.log(this.settings); // Все нормально
},
created(){
console.log(this.settings); // Все нормально
},
router: new VueRouter({
routes: [
{ path: '/calendar', component: calendar, props: {
settings: <b>this.settings</b> // Все плохо
}},
{ path: '/groups', component: Groups },
{ path: '/mail', component: Mail },
{ path: '/tests', component: Tests },
{ path: '*', redirect: '/calendar' }
]
}),
render: h => h(Page)
})
В props получаю settings, этот settings нужно передать дальше в календарь. Однако в route не передается this.settings. Точнее оно undefined. Да и this не передается, туда падает _esModule. Возможно, тут даже больше вопрос к сборщикам (babel). Можете совет дать как настройки передать?
UPDATE:
Пока нашел такое решение. Гореть мне за него в аду...
const Groups = { template: '<div>Groups</div>' };
const Mail = { template: '<div>Mail</div>' };
const Tests = { template: '<div>Tests</div>' };
const routes = [
{ path: '/calendar', component: calendar, props:{}},
{ path: '/groups', component: Groups },
{ path: '/mail', component: Mail },
{ path: '/tests', component: Tests },
{ path: '*', redirect: '/calendar' }
];
const router = new VueRouter({routes});
export default Vue.component('main-page', {
props : ['settings'],
created(){
routes[0].props.settings = this.settings
},
router,
render: h => h(Page)
})
Вынес роутинг за пределы компонента. А настройки заношу при создании корневого компонента...
