reworked the sub-navigation on the Match-page

src/router/index.js

@@ -1,32 +1,68 @@
 import {createRouter, createWebHistory} from 'vue-router'
 
-function lazyLoad(view) {
+function lazyLoadView(view) {
   return () => import(`@/views/${view}.vue`)
 }
 
+function lazyLoadComponent(view) {
+  return () => import(`@/components/${view}.vue`)
+}
+
 const routes = [
   {
     path: '/',
     name: 'Home',
-    component: lazyLoad('Home')
+    component: lazyLoadView('Home')
   },
   {
     path: '/player/:id',
     name: 'Player',
-    component: lazyLoad('Player'),
+    component: lazyLoadView('Player'),
     props: true
   },
   {
     path: '/match/:match_id',
     name: 'Match',
-    component: lazyLoad('Match'),
+    component: lazyLoadView('Match'),
     props: true,
-    alias: ['/match/:match_id/flashes', '/match/:match_id/utility', '/match/:match_id/damage', '/match/:match_id/details']
+    children: [
+      {
+        path: '',
+        alias: '/match/:match_id',
+        components: {
+          score: lazyLoadComponent('ScoreTeam')
+        }
+      },
+      {
+        path: 'details',
+        components: {
+          score: lazyLoadComponent('MultiKillsChart')
+        }
+      },
+      {
+        path: 'flashes',
+        components: {
+          score: lazyLoadComponent('FlashChart')
+        }
+      },
+      {
+        path: 'utility',
+        components: {
+          score: lazyLoadComponent('UtilityChart')
+        }
+      },
+      {
+        path: 'damage',
+        components: {
+          score: lazyLoadComponent('DamageChart')
+        }
+      }
+    ]
   },
   {
     path: '/explore',
     name: 'Explore',
-    component: lazyLoad('Explore'),
+    component: lazyLoadView('Explore'),
     props: true
   },
   {