solved build error

src/router/index.js

@@ -1,5 +1,6 @@
 import { createRouter, createWebHistory } from 'vue-router'
-import HomeView from '../views/HomeView.vue'
+import HomeView from '../views/Home.vue'
+import MusclesRouter from './muscles.router.js';
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -9,54 +10,55 @@ const router = createRouter({
       name: 'home',
       component: HomeView
     },
-    {
-      path: '/chest',
-      name: 'chest',
-      // route level code-splitting
-      // this generates a separate chunk (About.[hash].js) for this route
-      // which is lazy-loaded when the route is visited.
-      component: () => import('../views/Muscles/ChestView.vue')
-    },
-    {
-      path: '/shoulder',
-      name: 'shoulder',
-      // route level code-splitting
-      // this generates a separate chunk (About.[hash].js) for this route
-      // which is lazy-loaded when the route is visited.
-      component: () => import('../views/Muscles/ShoulderView.vue')
-    },
-    {
-      path: '/legs',
-      name: 'legs',
-      // route level code-splitting
-      // this generates a separate chunk (About.[hash].js) for this route
-      // which is lazy-loaded when the route is visited.
-      component: () => import('../views/Muscles/LegsView.vue')
-    },
-    {
-      path: '/back',
-      name: 'back',
-      // route level code-splitting
-      // this generates a separate chunk (About.[hash].js) for this route
-      // which is lazy-loaded when the route is visited.
-      component: () => import('../views/Muscles/BackView.vue')
-    },
-    {
-      path: '/biceps',
-      name: 'biceps',
-      // route level code-splitting
-      // this generates a separate chunk (About.[hash].js) for this route
-      // which is lazy-loaded when the route is visited.
-      component: () => import('../views/Muscles/BicepsView.vue')
-    },
-    {
-      path: '/triceps',
-      name: 'triceps',
-      // route level code-splitting
-      // this generates a separate chunk (About.[hash].js) for this route
-      // which is lazy-loaded when the route is visited.
-      component: () => import('../views/Muscles/TricepsView.vue')
-    },
+    {... MusclesRouter},
+    // {
+    //   path: '/chest',
+    //   name: 'chest',
+    //   // route level code-splitting
+    //   // this generates a separate chunk (About.[hash].js) for this route
+    //   // which is lazy-loaded when the route is visited.
+    //   component: () => import('../views/Muscles/ChestView.vue')
+    // },
+    // {
+    //   path: '/shoulder',
+    //   name: 'shoulder',
+    //   // route level code-splitting
+    //   // this generates a separate chunk (About.[hash].js) for this route
+    //   // which is lazy-loaded when the route is visited.
+    //   component: () => import('../views/Muscles/ShoulderView.vue')
+    // },
+    // {
+    //   path: '/legs',
+    //   name: 'legs',
+    //   // route level code-splitting
+    //   // this generates a separate chunk (About.[hash].js) for this route
+    //   // which is lazy-loaded when the route is visited.
+    //   component: () => import('../views/Muscles/LegsView.vue')
+    // },
+    // {
+    //   path: '/back',
+    //   name: 'back',
+    //   // route level code-splitting
+    //   // this generates a separate chunk (About.[hash].js) for this route
+    //   // which is lazy-loaded when the route is visited.
+    //   component: () => import('../views/Muscles/BackView.vue')
+    // },
+    // {
+    //   path: '/biceps',
+    //   name: 'biceps',
+    //   // route level code-splitting
+    //   // this generates a separate chunk (About.[hash].js) for this route
+    //   // which is lazy-loaded when the route is visited.
+    //   component: () => import('../views/Muscles/BicepsView.vue')
+    // },
+    // {
+    //   path: '/triceps',
+    //   name: 'triceps',
+    //   // route level code-splitting
+    //   // this generates a separate chunk (About.[hash].js) for this route
+    //   // which is lazy-loaded when the route is visited.
+    //   component: () => import('../views/Muscles/TricepsView.vue')
+    // },
   ]
 })
 

src/router/muscle.router.js

@@ -0,0 +1,15 @@
+import { Legs, Back, Chest, Shoulder, Triceps, Biceps } from '@/views/muscles';
+import Tilebar from '@/views/layouts';
+
+export default {
+    path: '/muscles',
+    component: Tilebar,
+    children: [
+        { path: 'legs', component: Legs },
+        { path: 'back', component: Back },
+        { path: 'chest', component: Chest },
+        { path: 'shoulder', component: Shoulder },
+        { path: 'triceps', component: Triceps },
+        { path: 'bicepts', component: Biceps },
+    ]
+};

src/views/layouts/Index.js

@@ -0,0 +1 @@
+export {default as Tilebar} from './Tilebar.vue';

src/views/layouts/Tilebar.vue

@@ -0,0 +1,8 @@
+<template>
+    <div class="p-4">
+        <div class="container">
+            <router-view />
+        </div>
+    </div>
+</template>
+

src/views/muscles/Index.js

@@ -0,0 +1,6 @@
+export {default as Legs} from './Legs.vue';
+export {default as Back} from './Back.vue';
+export {default as Chest} from './Chest.vue';
+export {default as Shoulder} from './Shoulder.vue';
+export {default as Triceps} from './Triceps.vue';
+export {default as Biceps} from './Biceps.vue';