menu nestedrouteitems problem solved

src/components/menu/ConfirmationDemo.vue

@@ -0,0 +1,12 @@
+<template>
+    <div class="flex align-items-center py-5 px-3">
+        <i class="pi pi-fw pi-check mr-2 text-2xl" />
+        <p class="m-0 text-lg">Confirmation Component Content via Child Route</p>
+    </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>

src/components/menu/PaymentDemo.vue

@@ -0,0 +1,12 @@
+<template>
+    <div class="flex align-items-center py-5 px-3">
+        <i class="pi pi-fw pi-money-bill mr-2 text-2xl" />
+        <p class="m-0 text-lg">Payment Component Content via Child Route</p>
+    </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>

src/components/menu/PersonalDemo.vue

@@ -0,0 +1,12 @@
+<template>
+    <div class="flex align-items-center py-5 px-3">
+        <i class="pi pi-fw pi-user mr-2 text-2xl" />
+        <p class="m-0 text-lg">Personal Component Content via Child Route</p>
+    </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>

src/components/menu/SeatDemo.vue

@@ -0,0 +1,12 @@
+<template>
+    <div class="flex align-items-center py-5 px-3">
+        <i class="pi pi-fw pi-ticket mr-2 text-2xl" />
+        <p class="m-0 text-lg">Seat Component Content via Child Route</p>
+    </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>

src/router/index.js

@@ -71,8 +71,25 @@ const router = createRouter({
                 },
                 {
                     path: '/uikit/menu',
-                    name: 'menu',
+                    component: () => import('@/views/uikit/Menu.vue'),
-                    component: () => import('@/views/uikit/Menu.vue')
+                    children: [
+                        {
+                            path: '/uikit/menu',
+                            component: () => import('@/components/menu/PersonalDemo.vue')
+                        },
+                        {
+                            path: '/uikit/menu/seat',
+                            component: () => import('@/components/menu/SeatDemo.vue')
+                        },
+                        {
+                            path: '/uikit/menu/payment',
+                            component: () => import('@/components/menu/PaymentDemo.vue')
+                        },
+                        {
+                            path: '/uikit/menu/confirmation',
+                            component: () => import('@/components/menu/ConfirmationDemo.vue')
+                        }
+                    ]
                 },
                 {
                     path: '/uikit/message',

src/views/uikit/Menu.vue

@@ -174,19 +174,19 @@ const breadcrumbItems = ref([{ label: 'Computer' }, { label: 'Notebook' }, { lab
 const nestedRouteItems = ref([
     {
         label: 'Personal',
-        to: '/menu'
+        to: '/uikit/menu'
     },
     {
         label: 'Seat',
-        to: '/menu/seat'
+        to: '/uikit/menu/seat'
     },
     {
         label: 'Payment',
-        to: '/menu/payment'
+        to: '/uikit/menu/payment'
     },
     {
         label: 'Confirmation',
-        to: '/menu/confirmation'
+        to: '/uikit/menu/confirmation'
     }
 ]);
 const tieredMenuItems = ref([