refactor: build router links directly from router config

This commit is contained in:
Sebin Nyshkim 2022-09-28 02:11:24 +02:00
parent 7bd86d73e6
commit eeb5ece970

View file

@ -1,4 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import router from "@/router";
import { RouterLink } from "vue-router"; import { RouterLink } from "vue-router";
import NavToggle from "@/components/NavToggle.vue"; import NavToggle from "@/components/NavToggle.vue";
@ -6,17 +7,6 @@ interface Props {
isActive: boolean; isActive: boolean;
} }
interface Route {
href: string;
title: string;
}
const routerLinks: Array<Route> = [
{ href: "/", title: "Home" },
{ href: "/anatomy", title: "Anatomy" },
{ href: "/career-path", title: "Career Path" },
];
const props = defineProps<Props>(); const props = defineProps<Props>();
</script> </script>
@ -29,11 +19,11 @@ const props = defineProps<Props>();
<ul class="navigation__list"> <ul class="navigation__list">
<li <li
class="navigation__item" class="navigation__item"
v-for="(route, idx) in routerLinks" v-for="(route, idx) in router.options.routes"
:key="idx" :key="idx"
> >
<RouterLink :to="route.href" @click="$emit('selected')"> <RouterLink :to="route.path" @click="$emit('selected')">
{{ route.title }} {{ route.meta?.title }}
</RouterLink> </RouterLink>
</li> </li>
</ul> </ul>