chore: fixed navigation & route links issues

src/components/sections/StockSection.vue

@@ -1,9 +1,9 @@
 <template>
   <section class="stock-section">
     <div class="section_modes">
-      <router-link v-for="(route, i) in testRoutes" :key="route" class="link-btn" :to="`/${route}`">
+      <router-link v-for="(route, i) in routes" :key="route.name" class="link-btn" :to="route.href">
-        <span class="text--accent">{{ i + 1 }}.</span> {{ $t(`topbar.${route}`) }}
+        <span class="text--accent">{{ i + 1 }}.</span> {{ $t(`topbar.${route.name}`) }}
-        <span v-if="route == 'stock-list'">({{ store.stockList.length }})</span>
+        <span class="text--grayed" v-if="route.name == 'stock'">({{ store.stockList.length }})</span>
       </router-link>
     </div>
 
@@ -18,12 +18,30 @@
 <script lang="ts" setup>
 import { onMounted } from 'vue';
 import { useStore } from '../../store';
-import { useRoute } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
 
 const store = useStore();
 const route = useRoute();
+const router = useRouter();
 
-const testRoutes = ['stock', 'wiki', 'numgen', 'stockgen'];
+const routes = [
+  {
+    name: 'stock',
+    href: '/',
+  },
+  {
+    name: 'wiki',
+    href: '/wiki',
+  },
+  {
+    name: 'numgen',
+    href: '/numgen',
+  },
+  {
+    name: 'stockgen',
+    href: '/stockgen',
+  },
+];
 
 onMounted(() => {
   window.addEventListener('keydown', (e) => {
@@ -32,8 +50,7 @@ onMounted(() => {
     if (/^[1234]$/.test(e.key)) {
       const keyNum = Number(e.key);
 
-      // store.stockSectionMode = sectionModes[keyNum - 1];
+      router.push(routes[keyNum - 1].href);
-      // (sectionButtonRefs.value[keyNum - 1] as HTMLButtonElement)?.focus();
     }
   });
 });
@@ -74,10 +91,6 @@ onMounted(() => {
   margin-bottom: 1em;
 }
 
-a.router-link-active {
-  color: gold;
-}
-
 @media screen and (max-width: 650px) {
   .section_modes {
     grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));

src/styles/global.scss

@@ -207,7 +207,7 @@ button {
   }
 }
 
-.link-btn.router-link-active {
+.link-btn.router-link-exact-active {
   color: $accentColor;
 }