How to pass parameters to a component via routing in vuejs?

Question

webpack

I have a vue root component that renders the page. There are several more child components on the page that are displayed depending on the selected tabs. This switching between components via vue-route is organized. Task: from the root component to pass parameters to the child ones.
The component itself:

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)
  })

In props I get settings, this settings needs to be passed further to the calendar. However, this.settings is not passed to route. More precisely, it is undefined. And this is not passed, _esModule falls there. Perhaps there is even more of a question for assemblers (babel). Can you give advice on how to transfer the settings?
UPDATE:
So far found such a solution. I'll burn in hell for him...

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)
  })

Moved the routing outside the component. And I put the settings when creating the root component ...

Answer 1

<router-view :prop="var">works, but in general, if such a question arises, then I would look towards vuex

Answer 2

Kosher
More kosher

Answer 3

I didn’t understand the question exactly, but you can contact the parent like this
this.$parent.что-то

Answer 4

I'm no expert, but have you tried props: true ? https://router.vuejs.org/en/essentials/passing-pro...

Answer 5

Or you can use global variables
https://stackoverflow.com/a/40416826/5981607