First element in route.matched has name set to undefined

[simoneboccolari]

Description:
I'm attempting to create a basic breadcrumb component that generates "crumbs" using the router logic. For this, I have structured my routes as follows:

const routes = {
    path: '/user',
    meta: { breadcrumb: { label: 'Users' } },
    children: [
        {
            path: '',
            name: 'user-list',
            component: UserList,
        },
        {
            path: ':userId',
            component: User,
            name: 'user-detail',
            meta: {
                breadcrumb: {
                    label: 'Detail',
                },
            },
            children: [
                {
                    path: 'edit',
                    component: User,
                    name: 'user-edit',
                    meta: {
                        breadcrumb: {
                            label: 'Edit',
                        },
                    },
                },
            ],
        },
    ],
}

When I navigate to /user/10/edit and inspect the route.matched elements like this:

const route = useRoute()
console.log(route.matched)

const crumbs = computed(() =>  
    route.matched.map((match) => ({  
        label: match.meta.breadcrumb?.label,  
        routeName: match.name,  
    })),  
)

I notice that the first element in the route.matched array has the name property always set to undefined.

Expected Behaviour:
I expect the name property for all matched routes, including the first element, to correspond to the route's name.

Questions:

1. Am I misusing route nesting in Vue Router?
2. Is this behaviour intentional, or could it be a bug?

Environment:

• Vue Router: 4.5.0
• Vue.js: 3.5.13

Additional Notes:
Thank you for any assistance and for the quality standard of the vue-router project.

[posva]

It's because your route with path /user has no name defined.