test

class_registration_app/src/components/Home.vue

@@ -16,7 +16,7 @@
     </div>
 
     <div class="login">
-        <a href=Login.vue><button class="btn-97" style="position: absolute;top:42%;left:50%;transform:translate(-50%,-50%)">Login with your NetID here</button></a>
+        <a href="/login"><button class="btn-97" style="position: absolute;top:42%;left:50%;transform:translate(-50%,-50%)">Login with your NetID here</button></a>
         <a style="position: absolute;top:80%;left:50%;transform:translate(-50%,-50%)">Forget your login?</a>
     </div>
 </div>

class_registration_app/src/components/NotFound.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+    <label>not found</label>
+</template>

class_registration_app/src/router/index.ts

@@ -10,12 +10,12 @@ const router = createRouter({
       component: HomeView
     },
     {
-      path: '/about',
-      name: 'about',
+      path: '/login',
+      name: 'login',
       // route level code-splitting
       // this generates a separate chunk (About.[hash].js) for this route
       // which is lazy-loaded when the route is visited.
-      component: () => import('../views/AboutView.vue')
+      component: () => import('../views/LoginView.vue')
     }
   ]
 })

class_registration_app/src/views/LoginView.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import Login from '../components/Login.vue'
+</script>
+
+<template>
+  <main>
+    <Login />
+  </main>
+</template>