How to pass this.$route to header?

Question

Vue.js

Hello!
I have this index.blade.php

<div id="app">             
<header-component></header-component>
<navbar-component></navbar-component>
<router-view></router-view>
<footer-component></footer-component>
</div>

I need to get current route this.$route in navbar-component.
In the router-view, I display pages on the given routes

const routes=[
    {
        path:"/",
        name: 'Home',
        component: () => import('./views/index.vue')
    },
    {
        path:"/about",
        name: 'About',
        component: () => import('./views/about.vue')
    },
....

header, navbar, footer are declared in app.js

Vue.component('header-component', require('./components/Header.vue').default);
Vue.component('navbar-component', require('./components/Categorybar.vue').default);
Vue.component('footer-component', require('./components/Footer.vue').default);

Because of this, as I understand it, I cannot get the current route parameter in them, because they return the values ​​of the start page.

Please tell me how to connect these components correctly in this case so that they have access to this.$route?

Answer 1

It turned out that the console was displaying the wrong value.
If you write console.log(this.$route); , then it outputs the value of the initial page.
If you use this.$route inside the component, then it will return the parameters of the current route, even if console.log displays the values ​​of the initial page.