Как в vuejs передать параметры компоненту через роутинг?

Есть у меня корневой компонент 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)
  })

Вынес роутинг за пределы компонента. А настройки заношу при создании корневого компонента...
  • Вопрос задан
  • 6233 просмотра
Пригласить эксперта
Ответы на вопрос 5
Fragster
@Fragster
помогло? отметь решением!
<router-view :prop="var"> работает, но вообще, если такой вопрос возникает, то я бы смотрел в сторону vuex
Ответ написан
Комментировать
Комментировать
@Ooos
Front-End
Точно не понял вопроса, но обращаться к родителю можно примерно вот так
this.$parent.что-то
Ответ написан
Я не спец, но вы пробовали props: true? https://router.vuejs.org/ru/essentials/passing-pro...
Ответ написан
Комментировать
@roxblnfk
Либо можно использовать глобальные переменные
https://stackoverflow.com/a/40416826/5981607
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы