Use enum to identify routes.

frontend/src/components/admin/StatisticsCard.vue

@@ -1,29 +1,25 @@
 <script setup lang="ts">
 import {computed, defineProps} from "vue";
 import type {ComponentVariant, NodesFilter} from "@/types";
+import type {RouteName} from "@/router";
+import router, {route} from "@/router";
 
 interface Props {
     title: string;
     icon: string;
     variant: ComponentVariant;
     value: number;
-    link: string;
+    route: RouteName;
     filter?: NodesFilter;
 }
 
 const props = defineProps<Props>();
 
 const linkTarget = computed(() => {
-    if (props.filter) {
-        return {
-            path: props.link,
-            query: {
-                filter: JSON.stringify(props.filter),
-            },
-        }
-    } else {
-        return props.link;
-    }
+    const query = props.filter && {
+        filter: JSON.stringify(props.filter),
+    };
+    return route(props.route, query);
 });
 </script>
 

frontend/src/components/page/PageHeader.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { useConfigStore } from "@/stores/config";
+import {route, RouteName} from "@/router";
 
 const config = useConfigStore();
 </script>
@@ -7,7 +8,7 @@ const config = useConfigStore();
 <template>
     <header v-if="config.getConfig">
         <nav>
-            <RouterLink class="logo" to="/">
+            <RouterLink class="logo" :to="route(RouteName.HOME)">
                 <img
                     src="/icon.svg"
                     alt="Symbol: Gelbes Zahnrad in zwei konzentrischen Kreisen (hellgrau und magenta)"
@@ -16,13 +17,13 @@ const config = useConfigStore();
             </RouterLink>
 
             <h1>
-                <RouterLink to="/">
                     {{ config.getConfig.community.name }} – Knotenverwaltung
+                <RouterLink :to="route(RouteName.HOME)">
                 </RouterLink>
             </h1>
 
-            <RouterLink class="admin-link" to="/admin">
-                <i class="fa fa-wrench" aria-hidden="true" /> Admin-Panel
+            <RouterLink class="admin-link" :to="route(RouteName.ADMIN)">
+                <i class="fa fa-wrench" aria-hidden="true"/> Admin-Panel
             </RouterLink>
         </nav>
     </header>

frontend/src/router/index.ts

@@ -1,25 +1,38 @@
-import {createRouter, createWebHistory} from "vue-router";
+import {createRouter, createWebHistory, type LocationQueryRaw, type RouteLocationRaw} from "vue-router";
 import AdminDashboardView from "@/views/AdminDashboardView.vue";
 import AdminNodesView from "@/views/AdminNodesView.vue";
 import HomeView from "@/views/HomeView.vue";
 import {isNodesFilter, isNodeSortField, isSortDirection, type SearchTerm} from "@/types";
 
+export enum RouteName {
+    HOME = "home",
+    ADMIN = "admin",
+    ADMIN_NODES = "admin-nodes",
+}
+
+export function route(name: RouteName, query?: LocationQueryRaw): RouteLocationRaw {
+    return {
+        name,
+        query,
+    };
+}
+
 const router = createRouter({
     history: createWebHistory(import.meta.env.BASE_URL),
     routes: [
         {
             path: "/",
-            name: "home",
+            name: RouteName.HOME,
             component: HomeView,
         },
         {
             path: "/admin",
-            name: "admin",
+            name: RouteName.ADMIN,
             component: AdminDashboardView,
         },
         {
             path: "/admin/nodes",
-            name: "admin-nodes",
+            name: RouteName.ADMIN_NODES,
             component: AdminNodesView,
             props: route => {
                 let filter: any;

frontend/src/views/AdminDashboardView.vue

@@ -2,6 +2,7 @@
 import StatisticsCard from "@/components/admin/StatisticsCard.vue";
 import {useStatisticsStore} from "@/stores/statistics";
 import {ComponentVariant, MonitoringState} from "@/types";
+import {RouteName} from "@/router";
 import PageContainer from "@/components/page/PageContainer.vue";
 
 const statistics = useStatisticsStore();
@@ -23,14 +24,14 @@ refresh();
                 icon="circle-o"
                 :variant="ComponentVariant.INFO"
                 :value="statistics.getStatistics.nodes.registered"
-                link="/admin/nodes"
+                :route="RouteName.ADMIN_NODES"
             />
             <StatisticsCard
                 title="Mit hinterlegtem fastd-Key"
                 icon="lock"
                 :variant="ComponentVariant.WARNING"
                 :value="statistics.getStatistics.nodes.withVPN"
-                link="/admin/nodes"
+                :route="RouteName.ADMIN_NODES"
                 :filter="{hasKey: true}"
             />
             <StatisticsCard
@@ -38,7 +39,7 @@ refresh();
                 icon="map-marker"
                 :variant="ComponentVariant.SUCCESS"
                 :value="statistics.getStatistics.nodes.withCoords"
-                link="/admin/nodes"
+                :route="RouteName.ADMIN_NODES"
                 :filter="{hasCoords: true}"
             />
             <StatisticsCard
@@ -46,7 +47,7 @@ refresh();
                 icon="heartbeat"
                 :variant="ComponentVariant.SUCCESS"
                 :value="statistics.getStatistics.nodes.monitoring.active"
-                link="/admin/nodes"
+                :route="RouteName.ADMIN_NODES"
                 :filter="{monitoringState: MonitoringState.ACTIVE}"
             />
             <StatisticsCard
@@ -54,7 +55,7 @@ refresh();
                 icon="envelope"
                 :variant="ComponentVariant.DANGER"
                 :value="statistics.getStatistics.nodes.monitoring.pending"
-                link="/admin/nodes"
+                :route="RouteName.ADMIN_NODES"
                 :filter="{monitoringState: MonitoringState.PENDING}"
             />
         </div>

frontend/src/views/AdminNodesView.vue

@@ -8,7 +8,7 @@ import ActionButton from "@/components/form/ActionButton.vue";
 import LoadingContainer from "@/components/LoadingContainer.vue";
 import NodesFilterPanel from "@/components/nodes/NodesFilterPanel.vue";
 import {SortTH} from "@/components/table/SortTH.vue";
-import router from "@/router";
+import router, {route, RouteName} from "@/router";
 
 const NODE_PER_PAGE = 50;
 
@@ -92,15 +92,17 @@ async function updateRouterState(
     sortField: NodeSortField,
 ): Promise<void> {
     const filterStr = Object.keys(filter).length > 0 ? JSON.stringify(filter) : undefined;
-    await router.replace({
-        path: '/admin/nodes',
-        query: {
-            q: searchTerm || undefined,
-            filter: filterStr,
-            sortDir: sortDirection,
-            sortField: sortField,
-        }
-    });
+    await router.replace(
+        route(
+            RouteName.ADMIN_NODES,
+            {
+                q: searchTerm || undefined,
+                filter: filterStr,
+                sortDir: sortDirection,
+                sortField: sortField,
+            }
+        )
+    );
 }
 
 async function updateFilter(filter: NodesFilter, searchTerm: SearchTerm): Promise<void> {