Die Route wird namentlich deklariert, aber this.$route.name : undefiniert

Question

Ich verwende Vue3 CDN zusätzlich zu einem Django-Projekt, zu dem ich einen VueRouter hinzugefügt habe, und es funktionierte großartig, bis ich beschloss, dem Routenobjekt einen Namen hinzuzufügen.

Innerhalb meiner Hauptkomponente versuche ich, den Wert des Routennamens jedes Mal zu überprüfen, wenn der Benutzer die Seite besucht.

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');

Ich habe den Pfad in der Konsole erhalten, aber $route.name scheint nicht zu funktionieren. Weiß denn keiner, was ich falsch gemacht habe?

Answer 1

this.$route.name 可以从子组件显示，而不是像我试图做的那样从实际的根组件显示。