Get the parent name of children's route Vue js

Question

I have this route that has a children. I can retrieve the name of the route however it is only applicable to the name of the children.

const routes = [
  {
    path: '/',
    name: 'Home', // <--- I want to get this route name
    component: () => import('layouts/MainLayout.vue'),
    children: [
      { path: '', component: () => import('src/pages/Home/Index.vue') },
      { path: '/patient', component: () => import('src/pages/Home/Patient.vue') },
    ]
  },
  {
    path: '/auth',
    name: 'Auth', <--- I want to get this route name
    component: () => import('layouts/AuthLayout.vue'),
    children: [
      { path: '', component: () => import('pages/Login.vue') },
      //{ path: '', component: () => import('pages/Login.vue') }
    ]
  },

  // Always leave this as last one,
  // but you can also remove it
  {
    path: '/:catchAll(.*)*',
    component: () => import('pages/Error404.vue')
  }
]

export default routes

Then I tried remove all named routes from the children and assigned a name to the parent but it gives me undefined whenever I console.log($route.name) on the MainLayout.vue

Answer 1

I'm not sure if this is really the right way of getting the parent's route name but I have achieved it using route.matched

import { useRoute } from 'vue-router'
...

const path = computed(() => $route.matched[0].name ) //[0] first one

This should return the component name Home