La route est déclarée par son nom, mais this.$route.name : undefined

Question

J'utilise Vue3 CDN sur un projet Django auquel j'ai ajouté un VueRouter et cela fonctionnait très bien jusqu'à ce que je décide d'ajouter un nom à l'objet route.

Dans mon composant principal, j'essaie de vérifier la valeur du nom de la route à chaque fois que l'utilisateur visite la 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');

J'ai le chemin dans la console mais $route.name ne semble pas passer. Personne ne sait ce que j'ai fait de mal ?

Answer 1

this.$route.name peut être affiché à partir du composant enfant, pas à partir du composant racine réel comme j'essaie de le faire.