refactor: group show routes under single entry point

src/router.ts

@@ -2,35 +2,44 @@ import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
 
 const routes: RouteRecordRaw[] = [
   { path: '/', redirect: '/shows' },
-  { path: '/shows', name: 'shows', component: () => import('@/Pages/MyShows.vue') },
   {
-    path: '/shows/:showId',
-    name: 'show',
-    component: () => import('@/Pages/Show.vue'),
-    redirect: (to) => ({ path: `/shows/${to.params.showId}/episodes` }),
+    path: '/shows',
     children: [
       {
-        path: 'basic-data',
-        name: 'show-basic-data',
-        component: () => import('@/Pages/ShowBasicData.vue'),
+        path: '/shows',
+        name: 'shows',
+        component: () => import('@/Pages/MyShows.vue'),
       },
       {
-        path: 'episodes',
-        name: 'show-episodes',
-        component: () => import('@/Pages/ShowEpisodes.vue'),
-      },
-      {
-        path: 'episodes/:episodeId',
-        name: 'show-episode',
-        component: () => import('@/Pages/ShowEpisode.vue'),
-        redirect: (to) => ({
-          path: `/shows/${to.params.showId}/episodes/${to.params.episodeId}/details`,
-        }),
+        path: ':showId',
+        name: 'show',
+        component: () => import('@/Pages/Show.vue'),
+        redirect: (to) => ({ path: `/shows/${to.params.showId}/episodes` }),
         children: [
           {
-            path: 'details',
-            name: 'show-episode-details',
-            component: () => import('@/Pages/ShowEpisodeDetails.vue'),
+            path: 'basic-data',
+            name: 'show-basic-data',
+            component: () => import('@/Pages/ShowBasicData.vue'),
+          },
+          {
+            path: 'episodes',
+            name: 'show-episodes',
+            component: () => import('@/Pages/ShowEpisodes.vue'),
+          },
+          {
+            path: 'episodes/:episodeId',
+            name: 'show-episode',
+            component: () => import('@/Pages/ShowEpisode.vue'),
+            redirect: (to) => ({
+              path: `/shows/${to.params.showId}/episodes/${to.params.episodeId}/details`,
+            }),
+            children: [
+              {
+                path: 'details',
+                name: 'show-episode-details',
+                component: () => import('@/Pages/ShowEpisodeDetails.vue'),
+              },
+            ],
           },
         ],
       },