Handle undefined routes

src/components/TextBlock.vue

@@ -13,12 +13,11 @@
 .text-block {
   display: flex;
   flex-direction: column;
+
   justify-content: center;
   align-items: center;
-}
+  /*justify-content: start;*/
 
-.text-block {
-  justify-content: start;
   word-break: break-word;
   height: fit-content;
 
@@ -27,6 +26,7 @@
   background: rgb(239, 239, 239);
 }
 
+
 @media screen and (max-width: 1501px) {
   .text-block {
     padding: 5px 15px 5px 15px;

src/router/index.ts

@@ -1,38 +1,18 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import HomeView from '../views/HomeView.vue'
 import AboutView from '../views/AboutView.vue'
-import ErrorView from '../views/ErrorView.vue'
 import CreateView from "../views/CreateView.vue";
 import JoinView from "../views/JoinView.vue";
+import ErrorView from '../views/ErrorView.vue';
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
-    {
+    { path: '/', name: 'home', component: HomeView},
-      path: '/',
+    { path: '/about', name: 'about', component: AboutView},
-      name: 'home',
+    { path: '/create', name: 'create', component: CreateView},
-      component: HomeView,
+    { path: '/join', name: 'join', component: JoinView},
-    },
+    { path: '/:pathMatch(.*)*', component: ErrorView }
-    {
-      path: '/about',
-      name: 'about',
-      component: AboutView,
-    },
-    {
-      path: '/error',
-      name: 'error',
-      component: ErrorView,
-    },
-    {
-      path: '/create',
-      name: 'create',
-      component: CreateView,
-    },
-    {
-      path: '/join',
-      name: 'join',
-      component: JoinView,
-    }
   ]
 })
 

src/views/ErrorView.vue

@@ -1,14 +1,22 @@
 <script setup lang="ts">
 
+import TextBlock from "@/components/TextBlock.vue";
 </script>
 
 <template>
-
+  <TextBlock>
-  <h1>Oopsie</h1>
+    <h1>Oopsie</h1>
-  <p>Something went wrong</p>
+    <p>Something went wrong</p>
+  </TextBlock>
 
 </template>
 
 <style scoped>
 
+.text-block {
+  border-left: solid 4px red;
+  width: 35%;
+  height: 35%;
+}
+
 </style>