Printer not found handler

web/src/router/index.ts

@@ -11,6 +11,13 @@ const routes = [
         name: 'Login',
         component: () =>
           import(/* webpackChunkName: "login" */ '@/views/Login.vue')
+      },
+
+      {
+        path: '/:pathMatch(.*)*',
+        name: 'NotFound',
+        component: () =>
+          import(/* webpackChunkName: "notfound" */ '@/views/404.vue')
       }
     ]
   },
@@ -26,13 +33,6 @@ const routes = [
         // which is lazy-loaded when the route is visited.
         component: () =>
           import(/* webpackChunkName: "home" */ '@/views/Home.vue')
-      },
-
-      {
-        path: '/:pathMatch(.*)*',
-        name: 'NotFound',
-        component: () =>
-          import(/* webpackChunkName: "notfound" */ '@/views/404.vue')
       }
     ]
   },

web/src/views/Printer.vue

@@ -18,22 +18,28 @@
 <script lang="ts" setup>
 import { api } from '@/api'
 import { Printer } from '@prisma/client'
-import { useRoute } from 'vue-router'
+import { useRouter } from 'vue-router'
 import { ref } from 'vue'
 import PrinterCard from '@/components/PrinterCard.vue'
 import PrinterTonerChart from '@/components/PrinterTonerChart.vue'
 import PrinterCounterChart from '@/components/PrinterCounterChart.vue'
 
-const route = useRoute()
+const router = useRouter()
 
 const printer = ref()
 
-const serialNumber = route.params.serialNumber as string
+const serialNumber = router.currentRoute.value.params.serialNumber as string
 
 async function getPrinter() {
+  try {
     printer.value = await api<Printer>(`printer/${serialNumber}`, {
       method: 'GET'
     })
+  } catch (error: any) {
+    if (error.message == 'Printer not found') {
+      router.push({ name: 'NotFound' })
+    } else console.log(error.message)
+  }
 }
 
 getPrinter()