improved subNav for matches

src/App.vue

@@ -4,7 +4,7 @@
   </header>
   <main>
     <div class="spacer"></div>
-    <router-view/>
+    <router-view name="main" />
   </main>
   <footer class="mt-auto">
     <Footer />

src/router/index.js

@@ -12,23 +12,36 @@ const routes = [
   {
     path: '/',
     name: 'Home',
-    component: lazyLoadView('Home')
+    components: {
+      main: lazyLoadView('Home')
+    }
+  },
+  {
+    path: '/explore',
+    name: 'Explore',
+    components: {
+      main: lazyLoadView('Explore')
+    }
   },
   {
     path: '/player/:id',
     name: 'Player',
-    component: lazyLoadView('Player'),
+    components: {
+      main: lazyLoadView('Player'),
+    },
     props: true
   },
   {
     path: '/match/:match_id',
     name: 'Match',
-    component: lazyLoadView('Match'),
+    // redirect: '/match/:match_id/overview',
+    components: {
+      main: lazyLoadView('Match')
+    },
     props: true,
     children: [
       {
-        path: '',
+        path: 'overview',
-        alias: '/match/:match_id',
         components: {
           score: lazyLoadComponent('ScoreTeam')
         }
@@ -59,12 +72,6 @@ const routes = [
       }
     ]
   },
-  {
-    path: '/explore',
-    name: 'Explore',
-    component: lazyLoadView('Explore'),
-    props: true
-  },
   {
     path: '/:pathMatch(.*)*',
     redirect: '/'

src/utils/GoTo.js

@@ -9,5 +9,5 @@ export const GoToPlayer = (id) => {
 }
 
 export const GoToLink = (link) => {
-  router.push(link)
+  router.replace(link)
 }

src/views/Match.vue

@@ -38,36 +38,36 @@
         <li :class="!data.matchDetails.parsed ? 'disabled' : ''"
             :title="!data.matchDetails.parsed ? 'This demo has not been parsed' : ''"
             class="list-item nav-item">
-          <router-link :disabled="!data.matchDetails.parsed" :to="'/match/' + data.matchDetails.match_id"
+          <router-link :disabled="!data.matchDetails.parsed" :to="'/match/' + data.matchDetails.match_id + '/overview'" replace
-                       class="nav-link" name="score">Scoreboard
+                       class="nav-link">Scoreboard
           </router-link>
         </li>
         <li :class="!data.matchDetails.parsed ? 'disabled' : ''"
             :title="!data.matchDetails.parsed ? 'This demo has not been parsed' : ''"
             class="list-item nav-item">
-          <router-link :disabled="!data.matchDetails.parsed" :to="'/match/' + data.matchDetails.match_id + '/details'"
+          <router-link :disabled="!data.matchDetails.parsed" :to="'/match/' + data.matchDetails.match_id + '/details'" replace
-                       class="nav-link" name="score">Details
+                       class="nav-link">Details
           </router-link>
         </li>
         <li :class="!data.matchDetails.parsed ? 'disabled' : ''"
             :title="!data.matchDetails.parsed ? 'This demo has not been parsed' : ''"
             class="list-item nav-item">
-          <router-link :disabled="!data.matchDetails.parsed" :to="'/match/' + data.matchDetails.match_id + '/flashes'"
+          <router-link :disabled="!data.matchDetails.parsed" :to="'/match/' + data.matchDetails.match_id + '/flashes'" replace
-                       class="nav-link" name="score">Flashes
+                       class="nav-link">Flashes
           </router-link>
         </li>
-<!--        <li :class="!data.matchDetails.parsed ? 'disabled' : ''"-->
+        <!--        <li :class="!data.matchDetails.parsed ? 'disabled' : ''"-->
-<!--            :title="!data.matchDetails.parsed ? 'This demo has not been parsed' : ''"-->
+        <!--            :title="!data.matchDetails.parsed ? 'This demo has not been parsed' : ''"-->
-<!--            class="list-item nav-item">-->
+        <!--            class="list-item nav-item">-->
-<!--          <router-link :disabled="!data.matchDetails.parsed" :to="'/match/' + data.matchDetails.match_id + '/utility'"-->
+        <!--          <router-link :disabled="!data.matchDetails.parsed" :to="'/match/' + data.matchDetails.match_id + '/utility'" replace-->
-<!--                       class="nav-link" name="score">Utility-->
+        <!--                       class="nav-link">Utility-->
-<!--          </router-link>-->
+        <!--          </router-link>-->
-<!--        </li>-->
+        <!--        </li>-->
         <li :class="!data.matchDetails.parsed ? 'disabled' : ''"
             :title="!data.matchDetails.parsed ? 'This demo has not been parsed' : ''"
             class="list-item nav-item">
-          <router-link :disabled="!data.matchDetails.parsed" :to="'/match/' + data.matchDetails.match_id + '/damage'"
+          <router-link :disabled="!data.matchDetails.parsed" :to="'/match/' + data.matchDetails.match_id + '/damage'" replace
-                       class="nav-link" name="score">Damage
+                       class="nav-link">Damage
           </router-link>
         </li>
       </ul>
@@ -141,6 +141,17 @@ export default {
         data.avgRank = Math.floor(fullRank / count)
     }
 
+    const checkRoute = () => {
+      if (route.fullPath.split('/')[3]) {
+        const sub = route.fullPath.split('/')[3]
+        GoToLink(`/match/${props.match_id}/${sub}`)
+      } else if (route.fullPath.split('/')[3] === undefined) {
+        // setTimeout(() => {
+          GoToLink(`/match/${props.match_id}/overview`)
+        // }, 200)
+      }
+    }
+
     // Watchers
     watch(() => props.match_id, GetMatch)
     watch(() => data.stats, GetAvgRank)
@@ -151,9 +162,7 @@ export default {
     })
 
     onMounted(() => {
-      if (!route.fullPath.match('details' || 'flashes' || 'damage')) {
+      checkRoute()
-        GoToLink(`/match/${props.match_id}`)
-      }
     })
 
     return {