router setup

src/App.vue

@@ -4,26 +4,14 @@
 import Greet from "./components/Greet.vue";
 import Navbar from "./components/Navbar.vue";
 import Camera from "./components/Camera.vue";
+import { RouterView } from "vue-router";
 </script>
 
 <template>
   <div>
     <Navbar/>
   </div>
-  <div class="grid">
+  <RouterView/>
-    <div>
-      <Camera/>
-    </div>
-    <div>
-      <Camera/>
-    </div>
-    <div>
-      <Camera/>
-    </div>
-    <div>
-      <Camera/>
-    </div>
-  </div>
   <!-- <div class="container">
     <h1>Welcome to Tauri!</h1>
     <div class="row">

src/components/Navbar.vue

@@ -15,14 +15,15 @@ export default {
   }
 };
 </script>
+
 <template>
     <nav style="background-color: #011949; padding: 10px;">
       <div style="display: flex; align-items: center;">
-        <a href="#" style="text-decoration: none;">
+        <router-link to="/" style="text-decoration: none;">
           <img src="../assets/NGCP.svg" alt="" width="40" height="24">
           <span style="font-weight: bold; font-size: 1.2rem; margin-left: 10px;">NG</span>
           <span style="font-weight: bold; font-size: 1.2rem; color: white">CP</span>
-        </a>
+        </router-link>
         <div style="width: 12rem; height:4rem;border: 2px solid rgb(52, 49, 49); background-color: rgb(255, 255, 255); margin-left: auto; display: flex; flex-direction: column; justify-content: center; align-items: flex-start;">
             <div>
                 <span style="font-weight: bold; font-size: 1.2rem; color: rgb(0, 0, 0);">Mission 1</span>
@@ -68,7 +69,7 @@ export default {
           <!-- Insert your menu items here -->
           <li><a href="#" style="text-decoration: none;">Home</a></li>
           <li><a href="#" style="text-decoration: none;">Link</a></li>
-          <li><a href="#" style="text-decoration: none;">Disabled</a></li>
+          <li><router-link to="/test" style="text-decoration: none;">Disabled</router-link></li>
         </ul>
       </div>
     </nav>

src/main.ts

@@ -1,5 +1,6 @@
 import { createApp } from "vue";
 import "./styles.css";
 import App from "./App.vue";
+import router from "./router";
 
-createApp(App).mount("#app");
+createApp(App).use(router).mount("#app");

src/router/index.js

@@ -0,0 +1,18 @@
+import { createRouter, createWebHashHistory } from "vue-router"
+import fourCam from "../views/fourCam.vue";
+import test from "../views/test.vue";
+
+
+const routes = [
+  { path: '/', component: fourCam },
+  { path: '/test', component: test },
+]
+
+const router = createRouter({
+  // 4. Provide the history implementation to use. We
+  // are using the hash history for simplicity here.
+  history: createWebHashHistory(),
+  routes, // short for `routes: routes`
+})
+
+export default router

src/views/fourCam.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+
+import Camera from "../components/Camera.vue";
+</script>
+
+<template>
+    <div class="grid">
+        <div>
+            <Camera/>
+        </div>
+        <div>
+            <Camera/>
+        </div>
+        <div>
+            <Camera/>
+        </div>
+        <div>
+            <Camera/>
+        </div>
+    </div>
+</template>

src/views/test.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+
+
+</script>
+
+<template>
+    <div class="grid">
+        <div>
+            <h1>
+                TESTESTES
+            </h1>
+        </div>
+    </div>
+</template>