The route is declared by name, but this.$route.name : undefined

Question

I'm using Vue3 CDN on top of a Django project, I added VueRouter to the project and it was working fine until I decided to add a name to the route object.

Inside my main component I try to check the value of the route name every time the user visits the page.

const routes = [
{ 
    path: '/',
    name: 'home',
    component: home 
},
{
   path: '/our-program'
   name: 'program',
   component: 'program'
}
]

const router = VueRouter.createRouter({
history: VueRouter.createWebHashHistory(),
// mode: history,
routes,}); 


const app = Vue.createApp({
data() {
    return {}
},
 computed:{
    isFocus(){
        return this.$route.name;
    }
},
mounted() {
    console.log(this.$route);
    },
});

const vm = app.use(router).mount('#pages');

I got the path in the console, but $route.name doesn't seem to pass. Doesn't anyone know what I did wrong?

Answer 1

this.$route.name can be displayed from the child component, not from the actual root component like I'm trying to do.